JavaScript 防抖与节流：从原理到实践的完整指南
🎯 引言
在现代 Web 开发中，用户交互事件（如输入、滚动、点击等）往往会高频触发，如果不加以控制，可能会导致：
- 🔥 性能问题：频繁执行复杂操作（如 API 请求、DOM 操作）
- 💰 资源浪费：无效的网络请求增加服务器负担
- 😵 用户体验差：页面卡顿、响应延迟
**防抖（Debounce）和节流（Throttle）**是解决这类问题的两种重要策略。
核心概念对比
| 特性 | 防抖 (Debounce) | 节流 (Throttle) |
|---|---|---|
| 执行时机 | 停止触发后延迟执行 | 固定时间间隔执行 |
| 触发频率 | 可能只执行一次 | 保证定期执行 |
| 典型场景 | 搜索框输入、按钮防重复点击 | 滚动事件、鼠标移动 |
| 核心思想 | "等等再执行" | "限制执行频率" |
🔍 防抖 (Debounce) 深入解析
什么是防抖？
防抖是一种控制函数执行频率的技术，核心思想是：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
// 防抖的生活类比：电梯等待
// 电梯门即将关闭时，如果有人按了按钮，就重新开始等待
// 只有在没有人按按钮的一段时间后，门才会关闭
防抖的工作原理
// 时间轴演示
// 用户输入: a -> b -> c -> d -> (停止输入)
// 时间点: 0ms 100ms 200ms 300ms 800ms
// 防抖效果: 清除 -> 清除 -> 清除 -> 清除 -> 执行(500ms后)
防抖的多种实现方式
1. 基础版本 - 函数属性存储
function debounce(fn, delay) {
return function(args) {
const that = this; // 保存 this 上下文
clearTimeout(fn.id); // 清除之前的定时器
fn.id = setTimeout(() => {
fn.call(that, args); // 保持 this 指向
}, delay);
};
}
// 使用示例
const debouncedSearch = debounce(function(keyword) {
console.log('搜索:', keyword);
}, 300);
2. 闭包版本 - 更优雅的实现
function debounce(fn, delay) {
let timeoutId = null; // 使用闭包存储定时器ID
return function(...args) {
const that = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(that, args);
}, delay);
};
}
3. 立即执行版本 - 首次触发立即执行
function debounce(fn, delay, immediate = false) {
let timeoutId = null;
return function(...args) {
const that = this;
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (!immediate) fn.apply(that, args);
}, delay);
if (callNow) fn.apply(that, args);
};
}
4. 带取消功能的完整版本
function debounce(fn, delay, immediate = false) {
let timeoutId = null;
const debounced = function(...args) {
const that = this;
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (!immediate) fn.apply(that, args);
}, delay);
if (callNow) fn.apply(that, args);
};
// 取消防抖
debounced.cancel = function() {
clearTimeout(timeoutId);
timeoutId = null;
};
// 立即执行
debounced.flush = function() {
if (timeoutId) {
clearTimeout(timeoutId);
fn.apply(this, arguments);
}
};
return debounced;
}
实际应用场景
1. 搜索框输入优化
// 搜索建议API调用
function searchSuggest(keyword) {
return fetch(`/api/search?q=${keyword}`)
.then(response => response.json())
.then(data => {
// 更新搜索建议UI
updateSearchSuggestions(data.suggestions);
});
}
const debouncedSearch = debounce(searchSuggest, 300);
// HTML: <input id="search" type="text" placeholder="搜索...">
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', (e) => {
const keyword = e.target.value.trim();
if (keyword) {
debouncedSearch(keyword);
}
});
2. 按钮防重复点击
// 表单提交防抖
function submitForm(formData) {
return fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
}).then(response => {
if (response.ok) {
showMessage('提交成功！', 'success');
} else {
showMessage('提交失败，请重试', 'error');
}
});
}
const debouncedSubmit = debounce(submitForm, 1000, true); // 立即执行版本
// HTML: <button id="submit-btn">提交</button>
const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', () => {
const formData = getFormData();
debouncedSubmit(formData);
});
3. 窗口大小调整优化
// 响应式布局调整
function handleResize() {
const width = window.innerWidth;
const height = window.innerHeight;
// 重新计算布局
if (width < 768) {
document.body.classList.add('mobile');
} else {
document.body.classList.remove('mobile');
}
// 更新图表尺寸
updateChartSize(width, height);
}
const debouncedResize = debounce(handleResize, 150);
window.addEventListener('resize', debouncedResize);
⏱️ 节流 (Throttle) 深入解析
什么是节流？
节流是另一种控制函数执行频率的技术，核心思想是：在固定时间间隔内只执行一次函数，即使在这个时间间隔内触发多次。
// 节流的生活类比：地铁发车
// 无论有多少人在站台等待，地铁都是每隔5分钟发一班车
// 不会因为人多就加快发车，也不会因为人少就停止发车
节流的工作原理
// 时间轴演示（节流间隔: 100ms）
// 触发时间: 0ms 20ms 40ms 60ms 80ms 120ms 140ms
// 节流效果: 执行 -> 忽略 -> 忽略 -> 忽略 -> 忽略 -> 执行 -> 忽略
节流的多种实现方式
1. 时间戳版本 - 简单直接
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime > delay) {
lastTime = now;
fn.apply(this, args);
}
};
}
// 使用示例
const throttledScroll = throttle(function() {
console.log('页面滚动中...');
}, 100);
window.addEventListener('scroll', throttledScroll);
2. 定时器版本 - 保证末尾执行
function throttle(fn, delay) {
let timeoutId = null;
let lastTime = 0;
return function(...args) {
const now = Date.now();
const remaining = delay - (now - lastTime);
clearTimeout(timeoutId);
if (remaining <= 0) {
// 可以立即执行
lastTime = now;
fn.apply(this, args);
} else {
// 设置定时器，保证末尾执行
timeoutId = setTimeout(() => {
lastTime = Date.now();
fn.apply(this, args);
}, remaining);
}
};
}
3. 完整版本 - 可配置首尾执行
function throttle(fn, delay, options = {}) {
const { leading = true, trailing = true } = options;
let timeoutId = null;
let lastTime = 0;
const throttled = function(...args) {
const now = Date.now();
// 禁用首次执行
if (!leading && lastTime === 0) {
lastTime = now;
}
const remaining = delay - (now - lastTime);
if (remaining <= 0) {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastTime = now;
fn.apply(this, args);
} else if (!timeoutId && trailing) {
timeoutId = setTimeout(() => {
lastTime = leading ? Date.now() : 0;
timeoutId = null;
fn.apply(this, args);
}, remaining);
}
};
// 取消节流
throttled.cancel = function() {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastTime = 0;
};
return throttled;
}
节流的实际应用场景
1. 滚动事件优化
// 无限滚动加载
function loadMoreContent() {
const scrollTop = window.pageYOffset;
const windowHeight = window.innerHeight;
const docHeight = document.documentElement.offsetHeight;
if (scrollTop + windowHeight >= docHeight - 100) {
// 接近底部时加载更多内容
fetchMoreData();
}
}
const throttledLoadMore = throttle(loadMoreContent, 200);
window.addEventListener('scroll', throttledLoadMore);
2. 鼠标移动事件
// 鼠标跟随效果
function updateMousePosition(event) {
const tooltip = document.getElementById('tooltip');
tooltip.style.left = event.clientX + 10 + 'px';
tooltip.style.top = event.clientY + 10 + 'px';
}
const throttledMouseMove = throttle(updateMousePosition, 16); // ~60fps
document.addEventListener('mousemove', throttledMouseMove);
3. 网络请求控制
// 实时保存功能
function autoSave(content) {
return fetch('/api/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content })
}).then(response => {
if (response.ok) {
showStatus('保存成功', 'success');
}
}).catch(error => {
showStatus('保存失败', 'error');
});
}
const throttledSave = throttle(autoSave, 3000);
// 编辑器内容变化时自动保存
const editor = document.getElementById('editor');
editor.addEventListener('input', (e) => {
throttledSave(e.target.value);
});
🔥 深入技术分析
为什么要使用 fn.id 保存定时器？
// 方法一：全局变量（不推荐）
let globalTimerId;
function debounce(fn, delay) {
return function(args) {
clearTimeout(globalTimerId); // 全局变量污染
globalTimerId = setTimeout(() => fn(args), delay);
};
}
// 方法二：闭包变量（推荐）
function debounce(fn, delay) {
let timerId; // 闭包保存，不污染全局
return function(args) {
clearTimeout(timerId);
timerId = setTimeout(() => fn(args), delay);
};
}
// 方法三：函数属性（合理）
function debounce(fn, delay) {
return function(args) {
clearTimeout(fn.id); // 利用函数对象特性
fn.id = setTimeout(() => fn(args), delay);
};
}
优缺点对比：
| 方法 | 优点 | 缺点 |
|---|---|---|
| 全局变量 | 简单直接 | 全局污染，多实例冲突 |
| 闭包变量 | 没有污染，封装好 | 占用内存，每个实例都有独立作用域 |
| 函数属性 | 内存友好，利用函数对象特性 | 修改了原函数对象 |
this 上下文问题深入分析
// 问题演示：不处理 this
function simpleDebounce(fn, delay) {
return function(args) {
setTimeout(() => fn(args), delay); // this 丢失
};
}
const obj = {
name: 'MyObject',
greet: simpleDebounce(function() {
console.log(`Hello, I'm ${this.name}`); // this 为 undefined
}, 300)
};
obj.greet(); // 输出: "Hello, I'm undefined"
// 正确处理：保存并传递 this
function correctDebounce(fn, delay) {
return function(...args) {
const context = this; // 保存当前 this
clearTimeout(fn.id);
fn.id = setTimeout(() => {
fn.apply(context, args); // 使用 apply 传递 this
}, delay);
};
}
const obj = {
name: 'MyObject',
greet: correctDebounce(function() {
console.log(`Hello, I'm ${this.name}`); // this 正确
}, 300)
};
obj.greet(); // 输出: "Hello, I'm MyObject"
箭头函数与普通函数的区别
// 箭头函数版本：自动继承外层 this
const debounceArrow = (fn, delay) => {
return (...args) => {
clearTimeout(fn.id);
fn.id = setTimeout(() => fn(...args), delay);
};
};
// 普通函数版本：需要手动处理 this
function debounceRegular(fn, delay) {
return function(...args) {
const context = this;
clearTimeout(fn.id);
fn.id = setTimeout(() => fn.apply(context, args), delay);
};
}
⚡ 性能对比与优化
防抖 vs 节流效果对比
// 性能测试代码
function performanceTest() {
let normalCount = 0;
let debounceCount = 0;
let throttleCount = 0;
// 普通函数
function normalHandler() {
normalCount++;
}
// 防抖函数
const debouncedHandler = debounce(() => {
debounceCount++;
}, 100);
// 节流函数
const throttledHandler = throttle(() => {
throttleCount++;
}, 100);
// 模拟高频事件（1000次触发，间隔10ms）
let i = 0;
const interval = setInterval(() => {
normalHandler();
debouncedHandler();
throttledHandler();
if (++i >= 1000) {
clearInterval(interval);
setTimeout(() => {
console.log(`普通函数执行次数: ${normalCount}`);
console.log(`防抖函数执行次数: ${debounceCount}`);
console.log(`节流函数执行次数: ${throttleCount}`);
}, 200);
}
}, 10);
}
// 运行结果示例：
// 普通函数执行次数: 1000
// 防抖函数执行次数: 1
// 节流函数执行次数: 100
内存性能优化
// 内存泄漏风险的防抖实现
function memoryLeakDebounce(fn, delay) {
const timers = new Map(); // 可能造成内存泄漏
return function(...args) {
const key = JSON.stringify(args);
clearTimeout(timers.get(key));
timers.set(key, setTimeout(() => {
fn.apply(this, args);
timers.delete(key); // 记得清理
}, delay));
};
}
// 内存友好的防抖实现
function memoryFriendlyDebounce(fn, delay) {
let timeoutId = null;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 重用实例的防抖实现
class DebounceManager {
constructor() {
this.debounces = new Map();
}
create(key, fn, delay) {
if (!this.debounces.has(key)) {
let timeoutId = null;
this.debounces.set(key, (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
});
}
return this.debounces.get(key);
}
clear(key) {
this.debounces.delete(key);
}
}
// 使用示例
const debounceManager = new DebounceManager();
const searchDebounce = debounceManager.create('search', handleSearch, 300);
const saveDebounce = debounceManager.create('save', handleSave, 1000);
不同场景下的选择建议
// 场景一：搜索框输入 - 使用防抖
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});
// 场景二：滚动加载 - 使用节流
const throttledLoadMore = throttle(loadMoreContent, 500);
window.addEventListener('scroll', throttledLoadMore);
// 场景三：按钮点击 - 使用防抖（立即执行）
const submitButton = document.getElementById('submit');
const debouncedSubmit = debounce(submitForm, 1000, true);
submitButton.addEventListener('click', debouncedSubmit);
// 场景四：窗口大小调整 - 使用防抖
const debouncedResize = debounce(handleResize, 150);
window.addEventListener('resize', debouncedResize);
📚 最佳实践指南
1. 合理的时间间隔设置
// 不同场景的推荐间隔
const DELAYS = {
SEARCH: 300, // 搜索输入
BUTTON_CLICK: 1000, // 按钮点击防重复
SCROLL: 100, // 滚动事件
RESIZE: 150, // 窗口大小调整
AUTO_SAVE: 2000, // 自动保存
MOUSE_MOVE: 16, // 鼠标移动 (~60fps)
API_CALL: 500 // API调用防抖
};
// 根据网络条件动态调整
function getAdaptiveDelay(baseDelay) {
const connection = navigator.connection;
if (connection) {
const { effectiveType } = connection;
switch (effectiveType) {
case '2g': return baseDelay * 2;
case '3g': return baseDelay * 1.5;
case '4g': return baseDelay;
default: return baseDelay;
}
}
return baseDelay;
}
const adaptiveSearchDelay = getAdaptiveDelay(DELAYS.SEARCH);
const debouncedSearch = debounce(performSearch, adaptiveSearchDelay);
2. 错误处理和重试机制
function robustDebounce(fn, delay, maxRetries = 3) {
let timeoutId = null;
let retryCount = 0;
return function(...args) {
const executeWithRetry = async () => {
try {
await fn.apply(this, args);
retryCount = 0; // 成功后重置重试次数
} catch (error) {
if (retryCount < maxRetries) {
retryCount++;
console.warn(`执行失败，第${retryCount}次重试:`, error);
// 指数退避重试
const retryDelay = delay * Math.pow(2, retryCount - 1);
timeoutId = setTimeout(executeWithRetry, retryDelay);
} else {
console.error('执行失败，已达到最大重试次数:', error);
retryCount = 0;
}
}
};
clearTimeout(timeoutId);
timeoutId = setTimeout(executeWithRetry, delay);
};
}
3. 组合使用模式
// 防抖 + 节流组合使用
function debounceThrottle(fn, debounceDelay, throttleDelay) {
const debouncedFn = debounce(fn, debounceDelay);
const throttledFn = throttle(debouncedFn, throttleDelay);
return throttledFn;
}
// 实际应用：高频搜索场景
const searchHandler = debounceThrottle(
performSearch,
300, // 防抖延迟
1000 // 节流间隔
);
// 保证最多1秒执行一次，但在停止输入300ms后也会执行
searchInput.addEventListener('input', (e) => {
searchHandler(e.target.value);
});
4. React Hook 封装
// React 防抖 Hook
import { useCallback, useRef } from 'react';
function useDebounce(callback, delay) {
const timeoutRef = useRef(null);
return useCallback((...args) => {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
callback(...args);
}, delay);
}, [callback, delay]);
}
// React 节流 Hook
function useThrottle(callback, delay) {
const lastRunRef = useRef(0);
const timeoutRef = useRef(null);
return useCallback((...args) => {
const now = Date.now();
if (now - lastRunRef.current > delay) {
lastRunRef.current = now;
callback(...args);
} else {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
lastRunRef.current = Date.now();
callback(...args);
}, delay - (now - lastRunRef.current));
}
}, [callback, delay]);
}
// 使用示例
function SearchComponent() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const debouncedSearch = useDebounce(async (searchQuery) => {
if (searchQuery.trim()) {
const response = await fetch(`/api/search?q=${searchQuery}`);
const data = await response.json();
setResults(data.results);
} else {
setResults([]);
}
}, 300);
const handleInputChange = (e) => {
const value = e.target.value;
setQuery(value);
debouncedSearch(value);
};
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="搜索..."
/>
<ul>
{results.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
}
🔧 高级技巧与应用
1. 可取消的防抖节流
// 带取消功能的高级防抖
function advancedDebounce(fn, delay, options = {}) {
const { maxWait = 0, leading = false, trailing = true } = options;
let timeoutId = null;
let maxTimeoutId = null;
let lastCallTime = 0;
let lastInvokeTime = 0;
let result;
function invokeFunc(time) {
const args = lastArgs;
const thisArg = lastThis;
lastArgs = lastThis = undefined;
lastInvokeTime = time;
result = fn.apply(thisArg, args);
return result;
}
function leadingEdge(time) {
lastInvokeTime = time;
timeoutId = setTimeout(timerExpired, delay);
return leading ? invokeFunc(time) : result;
}
function remainingWait(time) {
const timeSinceLastCall = time - lastCallTime;
const timeSinceLastInvoke = time - lastInvokeTime;
const timeWaiting = delay - timeSinceLastCall;
return maxWait
? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
: timeWaiting;
}
function shouldInvoke(time) {
const timeSinceLastCall = time - lastCallTime;
const timeSinceLastInvoke = time - lastInvokeTime;
return (lastCallTime === 0 ||
timeSinceLastCall >= delay ||
timeSinceLastCall < 0 ||
(maxWait && timeSinceLastInvoke >= maxWait));
}
function timerExpired() {
const time = Date.now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
timeoutId = setTimeout(timerExpired, remainingWait(time));
}
function trailingEdge(time) {
timeoutId = null;
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = undefined;
return result;
}
let lastArgs, lastThis;
function debounced(...args) {
const time = Date.now();
const isInvoking = shouldInvoke(time);
lastArgs = args;
lastThis = this;
lastCallTime = time;
if (isInvoking) {
if (timeoutId === null) {
return leadingEdge(lastCallTime);
}
if (maxWait) {
timeoutId = setTimeout(timerExpired, delay);
return invokeFunc(lastCallTime);
}
}
if (timeoutId === null) {
timeoutId = setTimeout(timerExpired, delay);
}
return result;
}
debounced.cancel = function() {
if (timeoutId !== null) {
clearTimeout(timeoutId);
}
if (maxTimeoutId !== null) {
clearTimeout(maxTimeoutId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timeoutId = maxTimeoutId = undefined;
};
debounced.flush = function() {
return timeoutId === null ? result : trailingEdge(Date.now());
};
debounced.pending = function() {
return timeoutId !== null;
};
return debounced;
}
2. 智能自适应防抖
// 根据用户行为自适应调整延迟时间
function adaptiveDebounce(fn, baseDelay = 300) {
let consecutiveCalls = 0;
let lastCallTime = 0;
let timeoutId = null;
return function(...args) {
const now = Date.now();
const timeSinceLastCall = now - lastCallTime;
// 如果调用间隔短，增加连续调用计数
if (timeSinceLastCall < baseDelay) {
consecutiveCalls++;
} else {
consecutiveCalls = 1;
}
lastCallTime = now;
// 根据连续调用次数动态调整延迟
const adaptiveDelay = Math.min(
baseDelay * Math.pow(1.5, Math.min(consecutiveCalls - 1, 5)),
baseDelay * 10
);
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
consecutiveCalls = 0;
fn.apply(this, args);
}, adaptiveDelay);
};
}
3. 异步防抖处理
// 异步防抖处理
function asyncDebounce(asyncFn, delay) {
let timeoutId = null;
let currentPromise = null;
let abortController = null;
return function(...args) {
return new Promise((resolve, reject) => {
// 取消之前的请求
if (abortController) {
abortController.abort();
}
clearTimeout(timeoutId);
timeoutId = setTimeout(async () => {
try {
abortController = new AbortController();
const result = await asyncFn.apply(this, [...args, abortController.signal]);
resolve(result);
} catch (error) {
if (error.name !== 'AbortError') {
reject(error);
}
}
}, delay);
});
};
}
🔥 面试题全解析
1. 手写防抖函数
面试官可能的问法：
请手写实现一个防抖函数，并解释其工作原理。
// 基础版本
function debounce(fn, delay) {
let timeoutId = null;
return function(...args) {
const context = this;
// 清除之前的定时器
clearTimeout(timeoutId);
// 设置新的定时器
timeoutId = setTimeout(() => {
fn.apply(context, args);
}, delay);
};
}
// 进阶版本：立即执行选项
function debounce(fn, delay, immediate = false) {
let timeoutId = null;
return function(...args) {
const context = this;
const callNow = immediate && !timeoutId;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (!immediate) {
fn.apply(context, args);
}
}, delay);
if (callNow) {
fn.apply(context, args);
}
};
}
关键点说明：
- 闭包保存状态：使用闭包保存
timeoutId - 清除定时器：每次调用都清除之前的定时器
- this 上下文：使用
apply保持原函数的 this 指向 - 参数传递：使用剩余参数和扩展运算符处理参数
2. 手写节流函数
面试官可能的问法：
请手写实现一个节流函数，并说明与防抖的区别。
// 时间戳版本
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
lastTime = now;
fn.apply(this, args);
}
};
}
// 定时器版本（保证末尾执行）
function throttle(fn, delay) {
let timeoutId = null;
let lastTime = 0;
return function(...args) {
const now = Date.now();
const context = this;
if (now - lastTime >= delay) {
lastTime = now;
fn.apply(context, args);
} else {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
lastTime = Date.now();
fn.apply(context, args);
}, delay - (now - lastTime));
}
};
}
3. 常见面试问题
Q1: 防抖和节流的区别是什么？
A:
- 防抖：重新计时，只有在停止触发一段时间后才执行
- 节流：固定时间间隔执行，不管触发频率如何
Q2: 什么情况下使用防抖，什么情况下使用节流？
A:
- 防抖：搜索框输入、按钮防重复点击、窗口大小调整
- 节流：滚动事件、鼠标移动、实时保存
Q3: 为什么要保存 this 上下文？
A:
// 问题演示
const obj = {
name: 'test',
method: debounce(function() {
console.log(this.name); // 如果不处理，this 为 undefined
}, 300)
};
// 解决方案：在防抖函数内保存并传递 this
function debounce(fn, delay) {
return function(...args) {
const context = this; // 保存当前 this
clearTimeout(fn.id);
fn.id = setTimeout(() => {
fn.apply(context, args); // 传递正确的 this
}, delay);
};
}
Q4: 如何实现一个可以取消的防抖函数？
A:
function debounce(fn, delay) {
let timeoutId = null;
function debounced(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
}
debounced.cancel = function() {
clearTimeout(timeoutId);
timeoutId = null;
};
return debounced;
}
4. 复杂面试题
Q: 如何实现一个同时支持防抖和节流的函数？
A:
function debounceThrottle(fn, debounceDelay, throttleDelay) {
let debounceTimer = null;
let throttleTimer = null;
let lastExecTime = 0;
return function(...args) {
const now = Date.now();
const context = this;
// 清除防抖定时器
clearTimeout(debounceTimer);
// 节流逻辑：检查是否可以执行
if (now - lastExecTime >= throttleDelay) {
lastExecTime = now;
fn.apply(context, args);
} else {
// 设置防抖定时器
debounceTimer = setTimeout(() => {
lastExecTime = Date.now();
fn.apply(context, args);
}, debounceDelay);
}
};
}
📝 总结与最佳实践
快速选择指南
| 场景 | 推荐方案 | 延迟时间 | 原因 |
|---|---|---|---|
| 搜索框输入 | 防抖 | 300ms | 等待用户输入完成 |
| 按钮点击 | 防抖(立即执行) | 1000ms | 防止重复提交 |
| 滚动事件 | 节流 | 100ms | 保持流畅体验 |
| 窗口大小调整 | 防抖 | 150ms | 避免不必要的重算 |
| 自动保存 | 节流 | 2000ms | 定期保存数据 |
| 鼠标移动 | 节流 | 16ms | 保持 60fps |
性能优化建议
- 选择合适的延迟时间
- 避免在高频事件中使用复杂逻辑
- 使用对象池管理多个防抖实例
- 适当使用 Web Worker 处理计算密集任务
- 结合 requestAnimationFrame 优化动画相关操作
最终建议
- 理解原理：深入理解防抖和节流的工作机制
- 合理应用：根据具体场景选择合适的方案
- 性能监控：在实际项目中监控性能表现
- 持续优化：根据用户反馈调整参数
防抖和节流是前端性能优化的重要手段，掌握它们的原理和应用对于打造高性能的 Web 应用至关重要。希望这篇文章能帮助您更好地理解和应用这些技术！
本文章介绍了防抖和节流的完整知识体系，从基础原理到高级应用，从性能优化到面试技巧，全面覆盖了实际开发中可能遇到的各种情况。
