JavaScript：簡單理解防抖和節(jié)流，如何定義防抖和節(jié)流函數(shù)
作者：青竹悅
防抖函數(shù)，就是防止抖動，避免事件重復(fù)觸發(fā)。比如監(jiān)聽輸入框的輸入，不應(yīng)該在用戶每輸入一個字符就觸發(fā)監(jiān)聽，而是在用戶輸入結(jié)束后再來監(jiān)聽。
防抖
防抖函數(shù)，就是防止抖動，避免事件重復(fù)觸發(fā)。比如監(jiān)聽輸入框的輸入，不應(yīng)該在用戶每輸入一個字符就觸發(fā)監(jiān)聽，而是在用戶輸入結(jié)束后再來監(jiān)聽。
流程為：1、事件觸發(fā)；2、開啟定時器；3、當(dāng)事件再次觸發(fā)的時候，就會清除上個定時器，然后重新開啟新的定時器；4、時間到了以后，就開始處理事件操作。
現(xiàn)在有一個輸入框，代碼如下：
import React from "react";
const Child2 = () => {
return <input onChange={({ target: { value } }) => {
console.log(value)
}} />
};效果如下圖：
圖片
每輸入一個字符，就觸發(fā)監(jiān)聽事件。如果是搜索查詢的話，那就不合適了。
現(xiàn)在在監(jiān)聽事件上設(shè)置防抖：
import React from "react";
const Child2 = () => {
const inputChange = debounce(({ target: { value } }) => {
console.log(value)
})
return <input onChange={inputChange} />
};
function debounce(fn) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, 1000);
};
}如果在定時器時間內(nèi)，事件再次觸發(fā)，那么就清空之前的定時器，然后重新開啟新的定時器。
效果圖：
圖片
這就是防抖。
節(jié)流
節(jié)流就是控制事件觸發(fā)的頻率。比如按鈕點擊，在短時間內(nèi)多次點擊，那么只需要觸發(fā)一次即可。
比如：
import React from "react";
const Child2 = () => {
return <button onClick={() => {
console.log("點擊")
}}>點擊</button>
};連續(xù)點擊多次，效果如下圖，如果是涉及到網(wǎng)絡(luò)請求的話，那么得不償失了。
圖片
現(xiàn)在定義一下節(jié)流函數(shù)：
// 節(jié)流
function throttle(fn) {
let timeout = null;
return function () {
if (timeout) return;
timeout = setTimeout(() => {
fn.apply(this, arguments);
timeout = null;
}, 1000);
}
}完整代碼：
import React from "react";
const Child2 = () => {
const click = throttle(() => {
console.log("點擊")
})
return <button onClick={click}>點擊</button>
};
// 節(jié)流
function throttle(fn) {
let timeout = null;
return function () {
if (timeout) return;
timeout = setTimeout(() => {
fn.apply(this, arguments);
timeout = null;
}, 1000);
}
}在一秒內(nèi)連續(xù)點擊多次，最后只有一次有效。
責(zé)任編輯：武曉燕
來源：
讀心悅
