上周写了window resize和scroll事件的基本优化,结果微博上交流的人还挺多,大家都提到了一个技术名词:“throttle”。
throttle
我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:
- 鼠标移动,mousemove 事件
- DOM 元素动态定位,window对象的resize和scroll 事件
有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射。我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发。回到window resize和scroll事件的基本优化提到的优化:
var resizeTimer=null; $(window).on('resize',function(){ if(resizeTimer){ clearTimeout(resizeTimer) } resizeTimer=setTimeout(function(){ console.log("window resize"); },400); } );
setTimeout和clearTimeout其实就是一个简单的 throttle,很多好的控制了resize事件的调用频度。
debounce
debounce和throttle很像,debounce是空闲时间必须大于或等于 一定值的时候,才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete,这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用,根据一定的时间间隔重复调用执行的方法。对于变态的输入,比如按住某一个建不放的时候特别有用。
debounce主要应用的场景比如:
- 文本输入keydown 事件,keyup 事件,例如做autocomplete
这类网上的方法有很多,比如Underscore.js就对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); };
demo:https://www.7psus5.com/demo/throttle_debounce/
更多阅读:
demo页面未找到. 终于把老文补回来了.不容易啊.
哎,是啊,demo页找不到了
提个意见,这个js的样式很不容易看清,建议换个样式
@李璇 已经修改,谢谢反馈
这2个函数的意思,你文章正好搞反了吧. debounc,正好使用 resized
var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
underscore的英文文档的解释给你正好相反。
给 immediate参数传递false 绑定的函数先执行????
immediate 是立即的意思 难道不是传true才立即执行 否则等待执行???
无法理解
两个概念弄反了
弄反了?