Javascript Throttle & Debounce应用介绍


Posted in Javascript onMarch 19, 2013

Throttle
无视一定时间内所有的调用,适合在发生频度比较高的,处理比较重的时候使用。

var throttle = function (func, threshold, alt) { 
var last = Date.now(); 
threshold = threshold || 100; 
return function () { 
var now = Date.now(); 
if (now - last < threshold) { 
if (alt) { 
alt.apply(this, arguments); 
} 
return; 
} 
last = now; 
func.apply(this, arguments); 
}; 
};

Debounce
一定间隔内没有调用时,才开始执行被调用方法。
var debounce = function (func, threshold, execASAP) { 
var timeout = null; 
threshold = threshold || 100; 
return function () { 
var self = this; 
var args = arguments; 
var delayed = function () { 
if (!execASAP) { 
func.apply(self, args); 
} 
timeout = null; 
}; 
if (timeout) { 
clearTimeout(timeout); 
} else if (execASAP) { 
func.apply(self, args); 
} 
timeout = setTimeout(delayed, threshold); 
}; 
};

Test
var test = function (wrapper, threshold) { 
var log = function () { 
console.log(Date.now() - start); 
}; 
var wrapperedFunc = wrapper(log, threshold); 
var start = Date.now(); 
var arr = []; 
for (var i = 0; i < 10; i++) { 
arr.push(wrapperedFunc); 
} 
while(i > 0) { 
var random = Math.random() * 1000; 
console.log('index: ' + i); 
console.log('random: ' + random); 
setTimeout(arr[--i], random); 
} 
}; 
test(debounce, 1000); 
test(throttle, 1000);
Javascript 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 #Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 #Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 #Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 #Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 #Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 #Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 #Javascript
You might like
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php利用事务处理转账问题
2015/04/22 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5 Web 存储详解
2016/09/16 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
房屋公证委托书
2014/04/03 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis