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 相关文章推荐
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
js实现按座位号抽奖
Apr 05 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 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
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
原生js中ajax访问的实例详解
2017/09/19 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
自我鉴定范文200字
2013/10/02 职场文书
销售辞职报告范文
2014/01/12 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
质量主管工作职责
2014/09/26 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
护理专业自荐信范文
2015/03/06 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python