某些场景下，比方相应鼠标挪动或许窗口大小调解的事宜，触发频次比较高。若处置惩罚函数轻微庞杂，须要较多的运算实行时刻，相应速度跟不上触发频次，往往会涌现耽误，致使假死或许卡顿感。

为了处理这个题目，我们只能经由过程削减实行函数的次数来进步相应速度。

throttle 和 debounce 是处理请乞降相应速度不婚配题目的两个计划。两者的差别在于挑选差别的战略。

• throttle 等时刻间隔实行函数。

• debounce 时刻间隔 t 内若再次触发事宜，则从新计时，直到住手时刻大于或即是 t 才实行函数。

throttle

/**
*
* @param fn {Function}   现实要实行的函数
* @param delay {Number}  实行间隔，单元是毫秒（ms）
*
* @return {Function}     返回一个“撙节”函数
*/
function throttle(fn, threshhold) {
  // 纪录上次实行的时刻
  var last
  // 定时器
  var timer
  // 默许间隔为 250ms
  threshhold || (threshhold = 250)
  // 返回的函数，每过 threshhold 毫秒就实行一次 fn 函数
  return function () {
    // 保留函数挪用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments
    var now = +new Date()
    // 假如间隔上次实行 fn 函数的时刻小于 threshhold，那末就摒弃
    // 实行 fn，并从新计时
    if (last && now < last + threshhold) {
      clearTimeout(timer)
      // 保证在当前时刻区间完毕后，再实行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)
    // 在时刻区间的最最先和抵达指定间隔的时刻实行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

挪用要领

$('body').on('mousemove', throttle(function (event) {
  console.log('tick');
}, 1000));

debounce

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

挪用要领

$('input.username').keypress(debounce(function (event) {
  // do the Ajax request
}, 250));