应用场景:当一个事件被频繁的触发的时候(比如resize/keyup/keydown方法等),浏览器的压力是很大的,况且用户也不需要那么快的数据,例如用户点击键盘事件进行联想搜索的时候,我就不需要频繁的发送ajax到后台,我可以等一等,等到用户输入的差不多了,我再发请求,或者固定频率发请求

防抖函数和节流函数的区别

防抖函数当用户不断触发事件的时候他会一直等待,而节流函数是按照规定的时间触发事件

• 防抖函数

/**
 * 功能:防抖函数
 * 参数:
 *    fn:事件触发的回调函数
 *    interval:事件触发的延迟时间
 *    flag:真 ==> 第一次事件触发的时候立即触发
 *    flag:假 ==> 全部延迟触发事件
 * 返回值:无
 * 
 * 在vue中的调用实例(methods的方法中)
 * keyup:debounce(function(name){
 *    console.log(name)
 * },500,false),
 */
function debounce(fn, interval, flag) {
  let timer = null;
  return function (...args) {
    clearInterval(timer);
    if (flag) {
      let callNow = !timer
      timer = setTimeout(() => {
        timer = null;
        fn.call(this);
      }, interval)
      if (callNow) {
        fn.apply(this, args);
      }
    } else {
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, interval)
    }
  }
};

• 节流函数

/**
 * 功能:节流函数
 * 参数:
 *    fn:事件触发的回调函数
 *    interval:事件触发的延迟时间
 * 返回值:无
 * 
 * 调用实例:
 * 在vue中的调用实例(methods的方法中)
 * keyup:throttle(function(name){
 *    console.log(name)
 * },500),
 */
function throttle(fn, interval) {
  let perviousTime = 0;
  return function () {
    let nowTime = Date.now();
    if (nowTime - perviousTime > interval) {
      fn.call(this);
      perviousTime = nowTime;
    }
  }
};