javascript:函数节流（throttle）与函数去抖（debounce）

一、前言

在开发中往往由于一些事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致页面卡顿，用户体验差。常见事件如下：

1. window对象的resize、scroll事件

2. 鼠标事件：拖拽mousemove事件、mousedown事件

3.键盘事件：keypress、keyup、keydown事件

就以上几个事件来说，对于resize事件，实际情况大多为停止改变大小n毫秒后执行后续处理；而其他事件大多是以一定的频率执行后续处理。那么针对这两种情况就出现了debounce（去抖）和throttle（节流）两种解决办法。

二、debounce

之前看到有人将其比喻为弹簧，要是一直按着不会就弹起，只有将手拿起弹簧才会弹起。也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。举几个例子：

（1）场景一：改变窗口大小执行某事件

var resizeTimer=null;

$(window).on('resize',function(){

       console.log("resize!!!");

       if(resizeTimer){
           clearTimeout(resizeTimer);
       }

       resizeTimer=setTimeout(function(){
           console.log("resize debounce!!!");
　　　　　　　//fn do something
       },400);

})

执行后效果如下：若在400ms后不改变窗口大小即执行 fn，对比可看出能对性能进行很好的优化

(2)场景二：类似百度搜索框的自动提示功能时候，使用了AJAX+keydown事件

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').keydown(debounce(function (event) {
  // do the Ajax request
}, 250));

 

三、throttle

就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。举例：

var throttle = function(delay, action){
  var last = 0return function(){
    var curr = +new Date()
    if (curr - last > delay){
      action.apply(this, arguments)
      last = curr 
    }
  }
}