函数防抖 函数节流

培训

函数防抖（debounce）

定义：

连续的调用，停止t后才会执行该动作，若在这t内又调用此动作则将重新计算t

场景案例：

监听 resize 事件，每缩小（或者放大）一次浏览器，实际上会触发多次，用户玩够了再执行

解决方案：

$(function() {
  var foo = debounce(resizeBox, 1000);
  $(window).on('load resize', foo);
});
function resizeBox() {
  var fullWidth = $('body').width(),
    maxWidth = 800;
  if (fullWidth <= maxWidth) {
    $('.full').width(fullWidth);
  } else {
    $('.full').width(maxWidth);
  }
}

场景案例：

文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证最后一次就好）

解决方案：

$(function() {
  var foo = debounce(checkInput, 1000);
  $('.input').on('keyup', function() {
    foo();
  });
});
function checkInput() {
  // 替换为异步请求，可减少请求次数
  $('.type').text($('.input').val());
}

函数节流（throttle）

定义：

一个不间断的调用，每隔t，执行一次

场景案例：

监听 resize 事件，每缩小（或者放大）一次浏览器，实际上会触发多次，周期性更新

解决方案：

$(function() {
  var foo = throttle(resizeBox, 1000);
  $(window).on('load resize', foo);
});
function resizeBox() {
  var fullWidth = $('body').width(),
    maxWidth = 800;
  if (fullWidth <= maxWidth) {
    $('.full').width(fullWidth);
  } else {
    $('.full').width(maxWidth);
  }
}

场景案例：

文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，周期性验证）

解决方案：

$(function() {
  var foo = throttle(checkInput, 1000);
  $('.input').on('keyup', function() {
    foo();
  });
});
function checkInput() {
  // 替换为异步请求，可减少请求次数
  $('.type').text($('.input').val());
}

相关资料：
函数节流（throttle）与函数去抖（debounce）

函数节流与去抖的可视化

/*
 * 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次
 * @param fn {function}  需要调用的函数
 * @param delay  {number}    延迟时间，单位毫秒
 * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
 * @param debounce {bool} 是否防抖动
 * @return {function}实际调用函数
 */
var throttle = function(fn, delay, immediate, debounce) {
  var curr = +new Date(), //当前时间
    last_call = 0,
    last_exec = 0,
    timer = null,
    diff, //时间差
    context, //上下文
    args,
    exec = function() {
      last_exec = curr;
      fn.apply(context, args);
    };
  return function() {
    curr = +new Date();
    context = this,
      args = arguments,
      diff = curr - (debounce ? last_call : last_exec) - delay;
    clearTimeout(timer);
    if (debounce) {
      if (immediate) {
        timer = setTimeout(exec, delay);
      } else if (diff >= 0) {
        exec();
      }
    } else {
      if (diff >= 0) {
        exec();
      } else if (immediate) {
        timer = setTimeout(exec, -diff);
      }
    }
    last_call = curr;
  };
};
/*
 * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，fn 才会执行
 * @param fn {function}  要调用的函数
 * @param delay   {number}    空闲时间
 * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行，而不是delay后后执行。
 * @return {function}实际调用函数
 */
var debounce = function(fn, delay, immediate) {
  return throttle(fn, delay, immediate, true);
};