前言
本文將重點介紹前端性能優(yōu)化方法之一的防抖和節(jié)流。首先解釋了它們的概念和原理，然后探討了它們在前端開發(fā)中的應用場景，如輸入框搜索、滾動事件等。最后，通過簡單的代碼示例展示了如何實現(xiàn)防抖和節(jié)流函數。通過學習和應用這兩種技術，我們可以有效地減少不必要的函數執(zhí)行次數，提高頁面響應速度，從而改善用戶體驗。
什么是防抖？
定義：延遲一段時間再觸發(fā)，如果再延遲時間內又觸發(fā)，則清除上一個定時，再開始新的定時。
應用場景：搜索框聯(lián)想、屏幕伸縮。
什么是節(jié)流？
定義：在一段時間間隔內，稀釋事件的觸發(fā)頻率，不論事件被觸發(fā)幾次，只執(zhí)行一次。
應用場景：
單位時間內，鼠標不論點擊多少次，只執(zhí)行一次（搜索內容未變化時）。
在使用列表下拉滾動加載時，用于定時監(jiān)聽滾動事件。
應用實例
防抖實例
下面是用防抖實現(xiàn)一個簡易版搜索框聯(lián)想+防抖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h1>防抖解決搜索聯(lián)想詞</h1>
</header>
<main>
<input type="text" id="search-input" placeholder="Search...">
<ul id="suggestions-list"></ul>
</main>
<script>
// 1.防抖函數
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 2.定義兩個變量分別存儲輸入框id和聯(lián)想詞id
const searchInput = document.getElementById('search-input');
const suggestionsList = document.getElementById('suggestions-list');
// 3.模擬異步請求獲取聯(lián)想詞
function fetchSuggestions(keyword) {
const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];
renderSuggestions(suggestions.filter(suggestion =>
suggestion.toLowerCase().startsWith(keyword.toLowerCase())
));
}
// 4.聯(lián)想詞顯示函數
function renderSuggestions(suggestions) {
suggestionsList.innerHTML = '';
suggestions.forEach((suggestion) => {
const listItem = document.createElement('li');
listItem.textContent = suggestion;
suggestionsList.appendChild(listItem);
});
}
// 定義默認方法，調用閉包方法，設置定時時間和防抖結束后調用的函數
const debounceFetchSuggestions = debounce(fetchSuggestions, 1000);
// 給輸入框id增加監(jiān)聽器
searchInput.addEventListener('input', function () {
// 獲取去空格value值
const keyword = searchInput.value.trim();
// 調用閉包方法
debounceFetchSuggestions(keyword);
});
</script>
</body>
</html>
講解代碼
1.在html代碼中寫input、ul，一個用來輸入，一個用來返回聯(lián)想詞，并給它們設置id值用于添加監(jiān)聽以及更新內容。
2.定義防抖函數：debounce
外層兩個參數分別存儲防抖事件處理方法以及延遲毫秒數。
timer用于存儲定時器的引用。內部返回的閉包函數如果在延遲時間內再次被調用，則timer重置，且重新開始計時。
如果延遲時間內沒有再次被調用，則調用func也就是fetchSuggestions函數，這里用到了一個方法apply，該方法有兩個參數，第一個參數決定this指向的是哪個上下文環(huán)境，這里指向的是當前上下文環(huán)境，第二個為普通參數。
3.定義兩個變量searchInput、suggestionsList分別把input和ul的id進行賦值。
4.模仿異步接口寫方法，該方法第一層是定義了所有聯(lián)想詞，第二層是調用聯(lián)想詞顯示函數。這里用到filter過濾和篩選，這里就不贅述了。
5.聯(lián)想詞顯示函數，這里用到的是forEach遍歷，createElement創(chuàng)建HTML元素，以及用li和appendchild加元素。
6.定義默認方法，并且設置事件處理方法和延遲毫秒數。
7.給輸入框加監(jiān)聽器監(jiān)聽器中使用trim去除空格，且調用閉包函數。文章來源：http://www.zghlxwxcb.cn/news/detail-754236.html
節(jié)流實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h1>節(jié)流解決搜索聯(lián)想詞</h1>
</header>
<main>
<input type="text" id="searchInput">
</main>
<script>
const searchInput = document.getElementById('searchInput');
function search(query) {
// 模擬搜索操作，這里可以替換為實際的搜索邏輯
console.log(`搜索: ${query}`);
}
// 使用節(jié)流函數處理搜索輸入
const throttleSearch = throttle(search, 1000); // 設定延遲為500毫秒
searchInput.addEventListener('keyup', function(event) {
const query = event.target.value.trim();
throttleSearch(query);
});
// 節(jié)流函數實現(xiàn)
function throttle(func, delay) {
let timerId;
let lastExecuted = 0;
return function(...args) {
const now = Date.now();
const timeSinceLastExecution = now - lastExecuted;
if (timeSinceLastExecution >= delay) {
func.apply(this, args);
lastExecuted = now;
} else {
clearTimeout(timerId);
timerId = setTimeout(() => {
func.apply(this, args);
lastExecuted = Date.now();
}, delay - timeSinceLastExecution);
}
};
}
</script>
</body>
</html>
我們首先獲取了搜索框的元素，并定義了一個 search 函數用于模擬搜索操作。然后，我們使用節(jié)流函數 throttle 對搜索函數進行包裝，設定了一個1000毫秒的延遲。
接下來，監(jiān)聽搜索框的 keyup 事件，并獲取用戶輸入的查詢詞。每次鍵盤釋放時，會調用節(jié)流函數 throttleSearch，并將查詢詞作為參數傳遞給搜索函數 search。
在節(jié)流函數的實現(xiàn)中，記錄了最后一次函數執(zhí)行的時間戳，并根據設定的延遲來判斷是否立即執(zhí)行函數或設置定時器延遲執(zhí)行函數。
當用戶在搜索框中輸入內容時，搜索請求會在一定的時間間隔內被觸發(fā)，避免了頻繁的搜索請求。文章來源地址http://www.zghlxwxcb.cn/news/detail-754236.html
到了這里，關于了解防抖和節(jié)流：提升前端交互體驗的實用策略的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
