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 validation插件表单验证的一个例子
Mar 03 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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目录导航文件代码
2006/10/09 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
django数据库migrate失败的解决方法解析
2018/02/08 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
服装设计专业自荐书范文
2013/12/30 职场文书
思想政治表现评语
2015/01/04 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
公司处罚决定书
2015/06/24 职场文书