javascript中的throttle和debounce浅析

  throttle

  我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:

  1.鼠标移动,mousemove 事件

  2.DOM 元素动态定位,window对象的resize和scroll 事件

  有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射。我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发。例如:

  

复制代码 代码如下:

  var resizeTimer=null;

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

  if(resizeTimer){

  clearTimeout(resizeTimer)

  }

  resizeTimer=setTimeout(function(){

  console.log("window resize");

  },400);

  debounce

  debounce和throttle很像,debounce是空闲时间必须大于或等于 一定值的时候,才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete,这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用,根据一定的时间间隔重复调用执行的方法。对于变态的输入,比如按住某一个建不放的时候特别有用。

  debounce主要应用的场景比如:

  文本输入keydown 事件,keyup 事件,例如做autocomplete

  这类网上的方法有很多,比如Underscore.js就对throttle和debounce进行封装。jQuery也有一个throttle和debounce的插件:jQuery throttle / debounce,所有的原理时一样的,实现的也是同样的功能。再奉上一个自己一直再用的throttle和debounce控制函数:

  

复制代码 代码如下:

  /*

  * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次

  * @param fn {function}  需要调用的函数

  * @param delay  {number}    延迟时间,单位毫秒

  * @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行。

  * @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);