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 相关文章推荐
图片之间的切换
Jun 26 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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
正则表达式语法
2006/10/09 Javascript
处理php自动反斜杠的函数代码
2010/01/05 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
Symfony查询方法实例小结
2017/06/28 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JsRender for index循环索引用法详解
2014/10/31 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
Python 流程控制实例代码
2009/09/25 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python中退出多层循环的方法
2018/11/27 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
python 项目目录结构设置
2020/02/14 Python
python中adb有什么功能
2020/06/07 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
小学母亲节活动方案
2014/03/14 职场文书
手机银行营销方案
2014/03/14 职场文书
工厂见习报告范文
2014/10/31 职场文书
经营场所使用证明
2015/06/19 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
HDFS免重启挂载新磁盘
2022/04/06 Servers
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android