Javascript Throttle & Debounce应用介绍
更新时间：2013年03月19日 10:14:10 作者：
Throttle:无视一定时间内所有的调用Debounce:一定间隔内没有调用时，接下来将为大家介绍下Throttle & Debounce的应用，感兴趣的朋友可以参考下哈
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);
无视一定时间内所有的调用，适合在发生频度比较高的，处理比较重的时候使用。
复制代码 代码如下:
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回调函数的相关资料,需要的朋友可以参考下2014-12-12
实例：用 JavaScript 来操作字符串(一些字符串函数)
实例：用 JavaScript 来操作字符串(一些字符串函数)...2007-02-02
这篇文章主要为大家介绍了js设计模式中单例模式的简要说明，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
学了这么久，你真的了解javascript吗？很多不知道的小白总是把它和java联系在一起，在这里阿牛很负责任的告诉你们，两者没有任何关系，今天就来带你们一起揭开javascript的神秘面纱2022-03-03
这篇文章主要介绍了JavaScript多线程运行库Nexus.js的学习心得以及代码分享，有需要的朋友一起参考学习下吧。2017-12-12
以前我们可能使用NodeJS自己写一个build程序，但是现在Grunt.js能够提供我们需要的一切2013-04-04
javascript学习笔记(五) Array 数组类型介绍
javascript学习笔记之Array 数组类型介绍，需要的朋友可以参考下2012-06-06
下面小编就为大家带来一篇浅谈javascript中new操作符的原理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
JavaScript中window、doucment、body的解释
JavaScript中window、doucment、body是什么意思呢，下面为大家做个介绍，不知道的朋友可以参考下2013-08-08
其实通俗的说就是一个有名称的代码段，方便重用。2010-04-04
最新评论