Javascript Throttle & Debounce应用介绍

218 阅读 0 评论 144 点赞

我是靠谱客的博主动听水杯，最近开发中收集的这篇文章主要介绍Javascript 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); 