函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

看一个🌰（栗子）：

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}
let inputa = document.getElementById('unDebounce')
inputa.addEventListener('keyup', function (e) {
    ajax(e.target.value)
})
复制代码

看一下运行结果：

可以看到，我们只要按下键盘，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：

//模拟一段ajax请求
function ajax(content) {
  console.log('ajax request ' + content)
}
function debounce(fun, delay) {
    return function (args) {
        let that = this
        let _args = args
        clearTimeout(fun.id)
        fun.id = setTimeout(function () {
            fun.call(that, _args)
        }, delay)
    }
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax, 500)
inputb.addEventListener('keyup', function (e) {
        debounceAjax(e.target.value)
    })
复制代码

看一下运行结果：

可以看到，我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。 再看一个🌰：

let biu = function () {
    console.log('biu biu biu',new Date().Format('HH:mm:ss'))
}
let boom = function () {
    console.log('boom boom boom',new Date().Format('HH:mm:ss'))
}
setInterval(debounce(biu,500),1000)
setInterval(debounce(boom,2000),1000)
复制代码

看一下运行结果：

这个🌰就很好的解释了，如果在时间间隔内执行函数，会重新触发计时。biu会在第一次1.5s执行后，每隔1s执行一次，而boom一次也不会执行。因为它的时间间隔是2s，而执行时间是1s，所以每次都会重新触发计时

个人理解 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条

源码分析

function fn(ev) {
  console.log('OK');
}
// 返回方法          执行函数 频率 是否第一次执行
btn.onclick = debounce(fn, 300, true);
// box.onclick = proxy  疯狂触发 proxy
// 但是我们最终想执行的是fn，
// 所以需要我们在proxy中，基于一些逻辑的处理，让fn只执行一次即可
/*
 * debounce:函数防抖 根据underscore代码编写
 *   @params
 *     func「function,required」:最后要执行的函数
 *     wait「number」:设定的频发触发的频率时间，默认值是300
 *     immediate「boolean」:设置是否是开始边界（第一次）触发，默认值是false
 *   @return
 *     func执行的返回结果
 */
function debounce(func, wait, immediate) {
  // 必须得传函数
  if (typeof func !== "function") {
    throw new TypeError('func must be required and must be an function!');
  }
  // wait没写 (只写了true, 本意是传给immediate) 
  if (typeof wait === "boolean") {    
    immediate = wait;
    wait = 300;
  }
  if (typeof wait !== "number") wait = 300;
  if (typeof immediate !== "boolean")    immediate = false;
  // 上面的判断降低报错可能
  var timer = null,
    result;
  // 返回方法 proxy (形成闭包)
  return function proxy() {
    var runNow = !timer && immediate,            // 是否立即执行
      params = [].slice.call(arguments),    // 函数里面有参数这里操作相当于(...参数)
      self = this;                                                // this指向当前操作元素
    if (timer) clearTimeout(timer);             // 频繁触发时候调用的清除 
    timer = setTimeout(function () {
      if (timer) { //当最后一次的结束后，把没用的这个定时器也干掉「良好的习惯」
        clearTimeout(timer);
        timer = null;
      };
      // 能到这里（是最后执行）runNow是false(timer在频繁触发过程中有值, runNow就为false)
      // immediate才能保持不变      
      !immediate ? result = func.apply(self, params) : null;        // 最后执行
    }, wait);
    runNow ? result = func.apply(self, params) : null;                    // 是否立即执行
    return result;
  };
}

简单版：

let debounce = function(fn, delay = 500) {
  if (typeof fn !== "function") {
    throw new TypeError("Expected a function");
  }
  let timer = null;
  return (...arg) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn.call(arg);
    }, delay);
  };
};

核心代码：

1. 频繁触发debounce, 每次都会重置定时器
2. 重置定时器要
3. **clearTimeout(timer);** （银行办业务，系统叫号, 销毁）
4. **timer = null;** （银行办业务, 手里的纸条, 撕毁）
5. 这里不需要，因为下面还要赋值
6. 不在delay时间内触发debounce, 就执行一次函数

function debounce(func, delay) {
  let timer = null;
    // 闭包一直在
  return function (...args) {
    // 频繁触发该函数，这里会一直clear计时器
    if (timer) clearTimeout(timer);
    // 当不再触发，delay毫秒后，就执行里面的函数
    timer = setTimeout(() => {
      //最后一次，能够执行了，也要记得清除最后一个定时器
      if (timer) { 
        clearTimeout(timer);
        timer = null;
      };
      // func的this指向 this
      func.apply(this, args);
    }, delay)
  }
}

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

看一个🌰：

  function throttle(fun, delay) {
        let last, deferTimer
        return function (args) {
            let that = this
            let _args = arguments
            let now = +new Date()
            if (last && now < last + delay) {
                clearTimeout(deferTimer)
                deferTimer = setTimeout(function () {
                    last = now
                    fun.apply(that, _args)
                }, delay)
            }else {
                last = now
                fun.apply(that,_args)
            }
        }
    }
    let throttleAjax = throttle(ajax, 1000)
    let inputc = document.getElementById('throttle')
    inputc.addEventListener('keyup', function(e) {
        throttleAjax(e.target.value)
    })
复制代码

看一下运行结果：

可以看到，我们在不断输入时，ajax会按照我们设定的时间，每1s执行一次。

结合刚刚biubiubiu的🌰：

    let biubiu = function () {
        console.log('biu biu biu', new Date().Format('HH:mm:ss'))
    }
    setInterval(throttle(biubiu,1000),10)
复制代码

不管我们设定的执行时间间隔多小，总是1s内只执行一次。

个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。

/*
 * throttle:函数节流
 *   @params
 *     func「function,required」:最后要执行的函数
 *     wait「number」:设定的频发触发的频率时间，默认值是300
 *   @return
 *     func执行的返回结果
 */
function throttle(func, wait) {
  if (typeof func !== "function") {
    throw new TypeError('func must be required and be an function!');
  }
  if (typeof wait !== "number") wait = 300;
  var timer = null,
    previous = 0,
    result;
  return function proxy() {
    var now = +new Date(),    
      remaining = wait - (now - previous),    // 剩下时间
      self = this,
      params = [].slice.call(arguments);
    // 超过时间了
    if (remaining <= 0) {
      // 立即执行即可
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      result = func.apply(self, params);
      previous = +new Date();    // 刷新当前时间
    }
    // 还没超时, 继续等
    else if (!timer) {
      // 没有达到间隔时间，而且之前也没有设置过定时器，此时我们设置定时器，等到remaining后执行一次
      timer = setTimeout(function () {
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        result = func.apply(self, params);
        previous = +new Date();    // 刷新当前时间
      }, remaining);
    }
    return result;
  };
}

简单版

侧重于一段时间内，执行一次。

let throttle = function(fn, delay = 400) {
  if (typeof fn !== "function") {
    throw new TypeError("Expected a function");
  }
  let flag = true;
  return function(...args) {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn(...args);
      flag = true;
    }, delay);
  };
};

过程分析：

1. 第一次触发事件，，开关项置为false
2. delay时间段内，再次触发，不新计时
3. delay时间后执行函数，并设置开关为true
4. 再次触发事件,开关项置为false
5. 距离上次触发delay时间内，不执行函数
6. 距离上次触发delay时间后，执行函数，并设置开关true

总结

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
• 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

结合应用场景

• debounce
  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源 触发Ajax请求。
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
• throttle
  • 重复点击事件，mousedown(单位时间内只触发一次)
  • scroll（监听滚动事件），比如是否滑到底部自动加载更多，用throttle来判断