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 相关文章推荐
基于Jquery的简单&简陋Tabs插件代码
Feb 09 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
angular实现商品筛选功能
Feb 01 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
Javascript创建类和对象详解
May 31 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 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
PHP中基本符号及使用方法
2010/03/23 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
学习面向对象之面向对象的术语
2010/11/30 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jqTransform美化表单
2015/10/10 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Python 解析xml文件的示例
2020/09/29 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
道路交通安全实施方案
2014/03/12 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
浅析Django接口版本控制
2021/06/26 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
讲解Python实例练习逆序输出字符串
2022/05/06 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android