性能優化之---防抖和節流
在前端開發中，防抖（Debounce）和節流（Throttle）是兩種常用的性能優化技術，主要用于控制高頻率觸發的事件，避免過多的計算或操作影響性能。
一、防抖（Debounce）
1. 原理
防抖的核心思想是將多次執行變為最后一次執行，即當持續觸發某個事件時，只在事件停止觸發后的指定時間內執行一次回調函數。防抖主要用于減少在短時間內重復觸發的操作。
2. 實現
實現防抖的關鍵是使用 setTimeout 來延遲執行回調函數，每次觸發事件時都重新設置計時器，只有在指定時間內沒有再次觸發事件時，才會執行回調函數。
function debounce(func, wait) { let timeout; return function (...args) { clearTimeout(timeout); timeout = setTimeout(() => { func.apply(this, args); }, wait); }; }
3. 應用場景
- 搜索框輸入：在用戶停止輸入后再發送請求。
- 窗口大小調整：在用戶停止調整窗口大小后再執行調整邏輯。
- 表單驗證：在用戶停止輸入后進行驗證。
二、節流（Throttle）
1. 原理
節流的核心思想是在一段時間內只允許一次執行，即當持續觸發某個事件時，在指定時間間隔內只執行一次回調函數。節流主要用于限制在一定時間內的執行次數。
2. 實現
實現節流的關鍵是通過 setTimeout 或時間戳來控制回調函數的執行頻率。
使用時間戳實現
function throttle(func, wait) { let previous = 0; return function (...args) { const now = Date.now(); if (now - previous > wait) { previous = now; func.apply(this, args); } }; }
使用 setTimeout 實現
function throttle(func, wait) { let timeout; return function (...args) { if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(this, args); }, wait); } }; }
3. 應用場景
- 滾動事件：在用戶滾動過程中限制執行頻率。
- 頁面縮放：在用戶縮放頁面時限制執行頻率。
- 按鈕點擊：在短時間內限制按鈕的點擊頻率。
三、結合防抖和節流
在某些場景下，可能需要結合防抖和節流來實現更加精細的控制。例如，在用戶輸入過程中使用防抖來減少請求次數，同時使用節流來限制請求頻率。
function debounceThrottle(func, wait, immediate) { let timeout, previous = 0; return function (...args) { const now = Date.now(); const later = () => { timeout = null; if (!immediate) func.apply(this, args); }; const callNow = immediate && !timeout; clearTimeout(timeout); if (now - previous > wait) { previous = now; if (callNow) func.apply(this, args); } timeout = setTimeout(later, wait); }; }
四、防抖和節流的對比
- 防抖：確保在事件停止觸發后的指定時間內只執行一次回調函數，適用于用戶停止操作后的處理。
- 節流：確保在指定時間間隔內只執行一次回調函數，適用于限制高頻率操作的執行次數。
五、實際案例
搜索框輸入防抖
<template>
<div>
<input type="text" v-model="query" @input="handleInput" placeholder="Search...">
</div>
</template>
<script>
import { debounce } from 'lodash';
export default {
data() {
return {
query: ''
};
},
methods: {
handleInput: debounce(function () {
console.log('Search:', this.query);
// 這里可以發送請求，獲取搜索結果
}, 300)
}
};
</script>
滾動事件節流
<template>
<div @scroll="handleScroll" style="height: 400px; overflow-y: scroll;">
<div style="height: 1000px;">Scroll me!</div>
</div>
</template>
<script>
import { throttle } from 'lodash';
export default {
methods: {
handleScroll: throttle(function () {
console.log('Scroll:', window.scrollY);
// 這里可以處理滾動事件邏輯
}, 200)
}
};
</script>
結合防抖和節流的按鈕點擊
<template>
<div>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
import { debounceThrottle } from './utils'; // 前面定義的 debounceThrottle 函數
export default {
methods: {
handleClick: debounceThrottle(function () {
console.log('Button clicked');
// 這里可以處理點擊事件邏輯
}, 500)
}
};
</script>
除了手動實現防抖和節流，市面上還有許多工具庫可以幫助我們更方便地使用這些技術。最常用的庫包括 Lodash 和 Underscore。
-
Lodash：一個現代 JavaScript 實用工具庫，提供了包括防抖和節流在內的許多有用函數。
-
Underscore：一個提供類似功能的實用工具庫。
浙公網安備 33010602011771號