Javascript Throttle & Debounce應(yīng)用介紹
更新時(shí)間:2013年03月19日 10:14:10 作者:
Throttle:無(wú)視一定時(shí)間內(nèi)所有的調(diào)用Debounce:一定間隔內(nèi)沒(méi)有調(diào)用時(shí),接下來(lái)將為大家介紹下Throttle & Debounce的應(yīng)用,感興趣的朋友可以參考下哈
Throttle
無(wú)視一定時(shí)間內(nèi)所有的調(diào)用,適合在發(fā)生頻度比較高的,處理比較重的時(shí)候使用。
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
一定間隔內(nèi)沒(méi)有調(diào)用時(shí),才開(kāi)始執(zhí)行被調(diào)用方法。
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);
無(wú)視一定時(shí)間內(nèi)所有的調(diào)用,適合在發(fā)生頻度比較高的,處理比較重的時(shí)候使用。
復(fù)制代碼 代碼如下:
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
一定間隔內(nèi)沒(méi)有調(diào)用時(shí),才開(kāi)始執(zhí)行被調(diào)用方法。
復(fù)制代碼 代碼如下:
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
復(fù)制代碼 代碼如下:
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函數(shù)的節(jié)流[throttle]與防抖[debounce]
- JavaScript中定時(shí)控制Throttle、Debounce和Immediate詳解
- JavaScript性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
- 詳解JavaScript節(jié)流函數(shù)中的Throttle
- JavaScript 節(jié)流函數(shù) Throttle 詳解
- javascript中的throttle和debounce淺析
- Javascript節(jié)流函數(shù)throttle和防抖函數(shù)debounce
相關(guān)文章
關(guān)于鍵盤(pán)事件中keyCode、which和charCode 的兼容性測(cè)試
關(guān)于鍵盤(pán)事件中keyCode、which和charCode 的兼容性測(cè)試...2006-12-12詳解JavaScript中setSeconds()方法的使用
這篇文章主要介紹了詳解JavaScript中setSeconds()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06淺談JavaScript的內(nèi)置對(duì)象和瀏覽器對(duì)象
下面小編就為大家?guī)?lái)一篇淺談JavaScript的內(nèi)置對(duì)象和瀏覽器對(duì)象。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06<script defer> defer 是什么意思
好多朋友不知道 script后面加個(gè)defer是什么意思有什么作用。2009-05-05Typescript中interface與type的相同點(diǎn)與不同點(diǎn)的詳細(xì)說(shuō)明
這篇文章主要介紹了Typescript中interface與type的相同點(diǎn)與不同點(diǎn),并配有實(shí)例說(shuō)明,需要的朋友可以參考下2022-11-11JavaScript入門(mén)之事件、cookie、定時(shí)等
本文從上一篇文章結(jié)束的地方開(kāi)始,解釋其他的一些基本的JavaScript語(yǔ)言概念,繼續(xù)為初學(xué)者提供對(duì)語(yǔ)言的基礎(chǔ)理解2011-10-10