視窗的resize、scroll、輸入框內容校驗等操作時，如果這些操作處理函式是較為複雜或頁面頻繁重渲染等操作時，在這種情況下如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce（防抖）和throttle（節流）的方式來減少觸發的頻率，同時又不影響實際效果。
eg：搜尋框的請求優化，輸入搜尋詞條需要立即觸發搜尋請求時，防抖和節流可以將多個請求合併為一個請求
github筆記傳送門，走過路過 star 一個？
首先準備 html 檔案中程式碼如下：
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
var num = 1;
var content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
content.onmousemove = count;
</script>
複製程式碼防抖
debounce（防抖），簡單來說就是防止抖動。
當持續觸發事件時，debounce 會合併事件且不會去觸發事件，當一定時間內沒有觸發再這個事件時，才真正去觸發事件。
非立即執行版
非立即執行版的意思是觸發事件後函式不會立即執行，而是在 n 秒後執行，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。
const debounce = (func, wait, ...args) => {
let timeout;
return function(){
const context = this;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
},wait);
}
}
複製程式碼如此呼叫：
content.onmousemove = debounce(count,1000);
複製程式碼
立即執行版
立即執行版的意思是觸發事件後函式會立即執行，然後 n 秒內不觸發事件才能繼續執行函式的效果。
const debounce = (func, wait, ...args) => {
let timeout;
return function(){
const context = this;
if (timeout) cleatTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
},wait)
if(callNow) func.apply(context,args)
}
}
複製程式碼
結合版
/**
* @desc 函式防抖
* @param func 函式
* @param wait 延遲執行毫秒數
* @param immediate true 表立即執行，false 表非立即執行
*/
function debounce(func,wait,immediate) {
var timeout;
return function () {
var context = this;
var args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
複製程式碼節流
throttle（節流），當持續觸發事件時，保證隔間時間觸發一次事件。
持續觸發事件時，throttle 會合並一定時間內的事件，並在該時間結束時真正去觸發一次事件。
時間戳版
在持續觸發事件的過程中，函式會立即執行，並且每 1s 執行一次。
const throttle = (func, wait, ...args) => {
let pre = 0;
return function(){
const context = this;
let now = Date.now();
if (now - pre >= wait){
func.apply(context, args);
pre = Date.now();
}
}
}
複製程式碼
定時器版
在持續觸發事件的過程中，函式不會立即執行，並且每 1s 執行一次，在停止觸發事件後，函式還會再執行一次。
const throttle = (func, wait, ...args) => {
let timeout;
return function(){
const context = this;
if(!timeout){
timeout = setTimeout(() => {
timeout = null;
func.apply(context,args);
},wait)
}
}
}
複製程式碼
結合版
其實時間戳版和定時器版的節流函式的區別就是，時間戳版的函式觸發是在時間段內開始的時候，而定時器版的函式觸發是在時間段內結束的時候。
/**
* @desc 函式節流
* @param func 函式
* @param wait 延遲執行毫秒數
* @param type 1 表時間戳版，2 表定時器版
*/
function throttle(func, wait ,type) {
if(type===1){
var previous = 0;
}else if(type===2){
var timeout;
}
return function() {
var context = this;
var args = arguments;
if(type===1){
var now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}else if(type===2){
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
複製程式碼underscore 原始碼
/**
* underscore 防抖函式，返回函式連續呼叫時，空閒時間必須大於或等於 wait，func 才會執行
*
* @param {function} func 回撥函式
* @param {number} wait 表示時間視窗的間隔
* @param {boolean} immediate 設定為ture時，是否立即呼叫函式
* @return {function} 返回客戶呼叫函式
*/
_.debounce = function(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
// 現在和上一次時間戳比較
var last = _.now() - timestamp;
// 如果當前間隔時間少於設定時間且大於0就重新設定定時器
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) {
// 如果需要立即執行函式的話 通過 apply 執行
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
複製程式碼- 對於按鈕防點選來說的實現：一旦我開始一個定時器，只要我定時器還在，不管你怎麼點選都不會執行回撥函式。一旦定時器結束並設定為 null，就可以再次點選了。
- 對於延時執行函式來說的實現：每次呼叫防抖動函式都會判斷本次呼叫和之前的時間間隔，如果小於需要的時間間隔，就會重新建立一個定時器，並且定時器的延時為設定時間減去之前的時間間隔。一旦時間到了，就會執行相應的回撥函式。
/**
* underscore 節流函式，返回函式連續呼叫時，func 執行頻率限定為 次 / wait
*
* @param {function} func 回撥函式
* @param {number} wait 表示時間視窗的間隔
* @param {object} options 如果想忽略開始函式的的呼叫，傳入{leading: false}。
* 如果想忽略結尾函式的呼叫，傳入{trailing: false}
* 兩者不能共存，否則函式不能執行
* @return {function} 返回客戶呼叫函式
*/
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
// 之前的時間戳
var previous = 0;
// 如果 options 沒傳則設為空物件
if (!options) options = {};
// 定時器回撥函式
var later = function() {
// 如果設定了 leading，就將 previous 設為 0
// 用於下面函式的第一個 if 判斷
previous = options.leading === false ? 0 : _.now();
// 置空一是為了防止記憶體洩漏，二是為了下面的定時器判斷
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
// 獲得當前時間戳
var now = _.now();
// 首次進入前者肯定為 true
// 如果需要第一次不執行函式
// 就將上次時間戳設為當前的
// 這樣在接下來計算 remaining 的值時會大於0
if (!previous && options.leading === false) previous = now;
// 計算剩餘時間
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果當前呼叫已經大於上次呼叫時間 + wait
// 或者使用者手動調了時間
// 如果設定了 trailing，只會進入這個條件
// 如果沒有設定 leading，那麼第一次會進入這個條件
// 還有一點，你可能會覺得開啟了定時器那麼應該不會進入這個 if 條件了
// 其實還是會進入的，因為定時器的延時
// 並不是準確的時間，很可能你設定了2秒
// 但是他需要2.2秒才觸發，這時候就會進入這個條件
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) {
// 判斷是否設定了定時器和 trailing
// 沒有的話就開啟一個定時器
// 並且不能不能同時設定 leading 和 trailing
timeout = setTimeout(later, remaining);
}
return result;
};
};
複製程式碼