javascript函数的throttle和debounce
2015-09-25 15:02
232 查看
转载自: http://www.css88.com/archives/4648
我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:
鼠标移动,mousemove 事件
DOM 元素动态定位,window对象的resize和scroll 事件
有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射。我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发。回到window
resize和scroll事件的基本优化提到的优化:
setTimeout和clearTimeout其实就是一个简单的 throttle,很多好的控制了resize事件的调用频度。
debounce和throttle很像,debounce是空闲时间必须大于或等于 一定值的时候,才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete,这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用,根据一定的时间间隔重复调用执行的方法。对于变态的输入,比如按住某一个建不放的时候特别有用。
debounce主要应用的场景比如:
文本输入keydown 事件,keyup 事件,例如做autocomplete
这类网上的方法有很多,比如Underscore.js就对throttle和debounce进行封装。jQuery也有一个throttle和debounce的插件:jQuery
throttle / debounce,所有的原理时一样的,实现的也是同样的功能。再奉上一个自己一直再用的throttle和debounce控制函数:
demo:http://www.css88.com/demo/throttle_debounce/
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的插件: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:http://www.css88.com/demo/throttle_debounce/
相关文章推荐
- JavaScript中常用函数(入门级)(持续更新)
- js中switch
- js常用方法
- 普及JSTL之核心标签库----基础文档
- JS - 循环添加 DropDownList(Select)
- JavaScript高级程序设计之JavaScript 版本 第1.3讲笔记
- JS获取浏览器及屏幕高度和宽度等信息
- javascript下ie7,ie8的Date Bug的解决 .
- JSP页面空指针异常调错办法之weblogic
- 转:表单中Readonly和Disabled的区别(HTML中使用javascript解除禁止input输入框代)
- 关于js动态向下拉列表中添加数据
- JavaScript高级程序设计之JavaScript实现 第1.2讲笔记
- JavaScript 开发的45个经典技巧
- JavaScript 对象方法 类方法 原型方法的区别;私有属性 公有属性 公有静态属性的区别
- 转载:JSON.parse()方法
- JavaScript高级程序设计之JavaScript 简介 第1.1讲笔记
- JS获得当前浏览器的地址参数信息
- jsp使用注释格式问题
- JS防止刷新,后退,关闭
- JS防止刷新,后退,关闭