在前端開發(fā)中有一部分的用戶行為會頻繁的觸發(fā)事件執(zhí)行，而對于DOM操作其掂、資源加載等耗費性能的處理款熬，很可能導(dǎo)致界面卡頓华烟，甚至瀏覽器的崩潰。函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)就是為了解決類似需求應(yīng)運而生的负饲。
原文鏈接
函數(shù)節(jié)流(throttle)
函數(shù)節(jié)流就是預(yù)定一個函數(shù)只有在大于等于執(zhí)行周期時才執(zhí)行返十，周期內(nèi)調(diào)用不執(zhí)行洞坑。好像水滴攢到一定重量才會落下一樣蝇率。
場景：
- 窗口調(diào)整（resize）
- 頁面滾動（scroll）
- 搶購瘋狂點擊（mousedown）
實現(xiàn)：
function throttle(method, delay){
var last = 0;
return function (){
var now = +new Date();
if(now - last > delay){
method.apply(this,arguments);
last = now;
}
}
}
document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);
underscore實現(xiàn)：
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : _.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _.now();
if (!previous && options.leading === false) previous = now;
//計算剩余時間
var remaining = wait - (now - previous);
context = this;
args = arguments;
//剩余時間小于等于0或者剩余時間大于等待時間(本地時間變動出現(xiàn))
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
函數(shù)防抖(debounce)
函數(shù)防抖就是在函數(shù)需要頻繁觸發(fā)情況時排拷，只有足夠空閑的時間，才執(zhí)行一次布蔗。好像公交司機會等人都上車后才出站一樣纵揍。
場景：
- 實時搜索（keyup）
- 拖拽（mousemove）
實現(xiàn)：
function debounce(method, delay){
var timer = null;
return function(){
var context = this,args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
method.apply(context, args);
},delay);
}
}
document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);
underscore實現(xiàn)：
_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
var last = _.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = _.now();
var callNow = immediate && !timeout;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)都是通過延時邏輯操作來提升性能的方法，在前端優(yōu)化中是常見且重要的解決方式特漩。可以從概念和實際應(yīng)用中理解兩者的區(qū)別，在需要的時候選擇合適的方法處理访得。
