Javascript Throttle & Debounce應用介紹
更新時間：2013年03月19日 10:14:10 作者：
Throttle:無視一定時間內所有的調用Debounce:一定間隔內沒有調用時，接下來將為大家介紹下Throttle & Debounce的應用，感興趣的朋友可以參考下哈
Throttle
無視一定時間內所有的調用，適合在發(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
一定間隔內沒有調用時，才開始執(zhí)行被調用方法。
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);
無視一定時間內所有的調用，適合在發(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
一定間隔內沒有調用時，才開始執(zhí)行被調用方法。
復制代碼 代碼如下:
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
下面小編就為大家?guī)硪黄獪\談javascript中new操作符的原理。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript中window、doucment、body的解釋
JavaScript中window、doucment、body是什么意思呢，下面為大家做個介紹，不知道的朋友可以參考下2013-08-08
其實通俗的說就是一個有名稱的代碼段，方便重用。2010-04-04