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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
使用Javascript简单计算器
Nov 17 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
中东人咖啡哲学
2021/03/03 咖啡文化
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python多任务及返回值的处理方法
2019/01/22 Python
python解析xml简单示例
2019/06/21 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python 安装移动复制第三方库操作
2020/07/13 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
初中中等生评语
2014/12/29 职场文书
五一放假通知怎么写
2015/08/18 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python