JavaScript-性能优化，函数节流（throttle）与函数去抖（debounce）

我在写一个类似百度搜索框的自动提示功能时候，使用了AJAX+keydown事件。调试时候我发现，当在搜索框中输入文字的时候，控制台在不停发送AJAX。这在本地服务器测试还好，如果我把它拿到运行环境，很可能出现提示功能卡顿，甚至没等提示出现用户就输入完毕的现象。毕竟大家现在打字都很快啊。于是我找到了一个新技能，函数节流 & 函数去抖。
throttle 和 debounce 是解决请求和响应速度不匹配问题的两个方案。二者的差异在于选择不同的策略。

• throttle 等时间间隔执行函数。
• debounce 时间间隔 t 内若再次触发事件，则重新计时，直到停止时间大于或等于 t 才执行函数。

throttle

function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      timer;
  return function () {
    var context = scope || this;

    var now = new Date(),
        args = arguments;
    if (last && now - last - threshhold < 0) {
      // hold on to it
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } 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));

总结

这两个方法适用于会重复触发的一些事件，如：mousemove，keydown，keyup，keypress，scroll等。如果只绑定原生事件，不加以控制，会使得浏览器卡顿，用户体验差。为了提高js性能，建议在使用以上及类似事件的时候用函数节流或者函数去抖加以控制。