通過搜索框的搜索提示學習防抖函數

生活明朗，萬物可愛

問題背景

用戶在輸入搜索關鍵詞的時候，每輸入一個字都會觸發一次input事件，我們不可能每次都獲取輸入的內容然后向后台發請求拿搜索提示，這對服務器的壓力是巨大的。

 

 場景還原

html代碼

<input type="text" id="search" />

js代碼

const search = document.getElementById("search");
search.addEventListener("input", function () {
console.log(this.value);
});

解決方法

於是聰明的程序員們想到了一個方法：每觸發一次input事件都會查看上一次的定時器里的函數是否已經執行，如果沒有執行，就取消上一次定時器，設置新的定時器。

function debounce(func, delay) {
let timer = null; //設置初始值為null
return function(...args) {
//返回一個新的函數
if (timer) clearTimeout(timer); //每次調用這個函數，都會去判斷是否還有timer，有(之前的沒執行)就取消掉
timer = setTimeout(() => {
//設置定時器，到一定時間就執行需要防抖執行的函數
func.apply(this, args);
}, delay);
};
}

search.addEventListener(
"input",
debounce(function () {
console.log(this.value);
}, 300)
);

 

 

使用防抖之后，通過設定delay，可以減少用戶在連續輸入情況下發送的請求次數，對服務器也友好很多

前途浩浩盪盪，未來無限可期 - - 共勉