Javascript Throttle & Debounce應(yīng)用介紹
更新時間：2013年03月19日 10:14:10 作者：
Throttle:無視一定時間內(nèi)所有的調(diào)用Debounce:一定間隔內(nèi)沒有調(diào)用時，接下來將為大家介紹下Throttle & Debounce的應(yīng)用，感興趣的朋友可以參考下哈
Throttle
無視一定時間內(nèi)所有的調(diào)用，適合在發(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)沒有調(diào)用時，才開始執(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);
無視一定時間內(nèi)所有的調(diào)用，適合在發(fā)生頻度比較高的，處理比較重的時候使用。
復(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)沒有調(diào)用時，才開始執(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中定時控制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)文章
這篇文章主要介紹了理解javascript回調(diào)函數(shù)的相關(guān)資料,需要的朋友可以參考下2014-12-12
實(shí)例：用 JavaScript 來操作字符串(一些字符串函數(shù))
實(shí)例：用 JavaScript 來操作字符串(一些字符串函數(shù))...2007-02-02
這篇文章主要為大家介紹了js設(shè)計(jì)模式中單例模式的簡要說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
學(xué)了這么久，你真的了解javascript嗎？很多不知道的小白總是把它和java聯(lián)系在一起，在這里阿牛很負(fù)責(zé)任的告訴你們，兩者沒有任何關(guān)系，今天就來帶你們一起揭開javascript的神秘面紗2022-03-03
JavaScript多線程運(yùn)行庫Nexus.js詳解
這篇文章主要介紹了JavaScript多線程運(yùn)行庫Nexus.js的學(xué)習(xí)心得以及代碼分享，有需要的朋友一起參考學(xué)習(xí)下吧。2017-12-12
使用Grunt.js管理你項(xiàng)目的應(yīng)用說明
以前我們可能使用NodeJS自己寫一個build程序，但是現(xiàn)在Grunt.js能夠提供我們需要的一切2013-04-04
javascript學(xué)習(xí)筆記(五) Array 數(shù)組類型介紹
javascript學(xué)習(xí)筆記之Array 數(shù)組類型介紹，需要的朋友可以參考下2012-06-06
下面小編就為大家?guī)硪黄獪\談javascript中new操作符的原理。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
JavaScript中window、doucment、body的解釋
JavaScript中window、doucment、body是什么意思呢，下面為大家做個介紹，不知道的朋友可以參考下2013-08-08
其實(shí)通俗的說就是一個有名稱的代碼段，方便重用。2010-04-04