javascript中的throttle和debounce浅析


Posted in Javascript onJune 06, 2014

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);
Javascript 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
vue视图不更新情况详解
May 16 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
单击某一段文字改写文本颜色
Jun 06 #Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 #Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 #Javascript
jQuery插件开发详细教程
Jun 06 #Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 #Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 #Javascript
js检验密码强度(低中高)附图
Jun 05 #Javascript
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
小程序实现横向滑动日历效果
2019/10/21 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
python对数组进行反转的方法
2015/05/20 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python 异常处理总结
2016/10/18 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
董事长职责范文
2013/11/08 职场文书
采购员岗位职责
2013/11/15 职场文书
体育教学随笔感言
2014/02/24 职场文书
在职证明格式样本
2015/06/15 职场文书
高中历史教学反思
2016/02/19 职场文书
Python合并pdf文件的工具
2021/07/01 Python