Lodash 笔记之 debounce 与 throttle 的区别

Vue 2.0 由于规范,把函数过滤器简化掉了,所以 debounce 也没有了,节流问题需要自行实现了,这时,引用 Lodash 可以很好地解决,于是,开始了我的Lodash之旅。

debounce 和 throttle 都是节流方法,要理解其区别,来看看throttle的源码:

function throttle(func, wait, options) {
  var leading = true,
	  trailing = true;
  if (typeof func != 'function') {
	throw new TypeError(FUNC_ERROR_TEXT);
  }
  if (isObject(options)) {
	leading = 'leading' in options ? !!options.leading : leading;
	trailing = 'trailing' in options ? !!options.trailing : trailing;
  }
  return debounce(func, wait, {
	'leading': leading,
	'maxWait': wait,
	'trailing': trailing
  });
}

可见,throttle 只是从 debounce 中固定参数简化出来的方法而已,为的是使用上的简便,其主要做的事情是把wait的值同时设置到maxWait上,并把 debounce 默认为false的参数leading改为默认为true

从默认参数,并且不手动传递options的情况进行对比,结论如下:

  • debounce 生成的方法在每次触发时都会重置计时器,监听器的每次触发都会导致计时器将重头计时,若监听器频繁被触发,结果是响应方法迟迟不会执行,直到动作停止的时间单独超过设定值

  • throttle 默认leadingtrue,所以计时器开始和结束都会触发一次检查,其生成的方法在每次触发都有两次机会执行响应方法,第一次是动作触发时,其会判断是否已有计时器存在,若没有,则立即执行,并生成一个结束无动作的计时器(因为已经在开始时执行过了,所以这个计时器只是用来限制后来的监听以达到节流目的);若已有计时器存在,则不执行任何响应,只生成一个计时器,保留第二次机会,在该计时器结束时再检查是否依然存在计时器,若存在则再次忽略,否则,执行响应方法。

参考:

http://drupalmotion.com/article/debounce-and-throttle-visual-explanation

https://lodash.com/docs/

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏