防抖与节流常见的几种实现方式

节流和防抖都是为了解决高频率触发事件而出现的，类似resize,scroll,mousemove的事件在触发时绑定的事件会执行很多次

鼠标在在元素内移动时，显示e.client,e.clientY

防抖

在限制的时间内持续触发事件的时候，函数是完全不执行的

非立即执行版，等最后一次触发结束的一段时间之后，函数再去执行

function debounce(func, delay) {
  let timeout
  return function() {
    clearTimeout(timeout) // 如果持续触发，那么就清除定时器，定时器的回调就不会执行。
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

delay设置为1000ms,这时效果会变成这样

立即执行版，函数立即执行，但在接下来的持续触发的事件在一段时间内完全不会再执行

function debounce(func,wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);

        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)

        if (callNow) func.apply(context, args)
    }
}

同样delay为1000ms，这里是鼠标移入的那一瞬间函数就执行了

双剑合璧版

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

节流

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次，在一段时间内，只执行一次，降低执行的频率。

可以用定时器的方式来实现

 function throttle(func, deley) {
    let run = true
    return function () {
      if (!run) {
        return  // 如果开关关闭了，那就直接不执行下边的代码
      }
      run = false // 持续触发的话，run一直是false，就会停在上边的判断那里
      setTimeout(() => {
        func.apply(this, arguments)
        run = true // 定时器到时间之后，会把开关打开
      }, deley)
    }
  }

也可以用时间戳的方式实现

function throttle(func, delay) {
    let preTime = 0;
    return function() {
        let curTime = Date.now();
        let context = this;
        let args = arguments;
        if (curTime - preTime > delay) {
            func.apply(context, args);
            preTime = curTime;
        }
    }
}

即使一直在触发，做节流处理每1000ms执行了一次；