在JavaScript开发中，我们经常会遇到一些高频触发的事件，比如输入框实时搜索、页面滚动加载、窗口大小调整等。如果每次触发事件都立即执行对应的处理函数，会消耗大量性能，甚至导致页面卡顿。防抖和节流就是用来解决这类问题的两种常用方案，它们的核心都是限制函数的执行频率，但实现逻辑和应用场景有所不同。
防抖的概念与实现
防抖指的是当函数触发后，不立即执行，而是等待一段时间，如果这段时间内没有再次触发该函数，才执行函数；如果这段时间内再次触发了函数，则重新计时。最常见的场景就是搜索框输入联想，用户连续输入时不会频繁请求接口，只有停止输入一段时间后才发起请求。
基础防抖实现
我们可以通过闭包和定时器来实现防抖函数：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
// 如果已有定时器，先清除
if (timer) {
clearTimeout(timer);
}
// 重新设置定时器
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
};
}
防抖使用示例
以搜索框输入为例，使用上面的防抖函数优化输入事件：
// 模拟请求接口的函数
function search(keyword) {
console.log('发起搜索请求，关键词：', keyword);
}
// 获取输入框元素
const input = document.querySelector('input[type="text"]');
// 创建防抖后的搜索函数，延迟500毫秒执行
const debouncedSearch = debounce(search, 500);
// 绑定输入事件
input.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});
节流的概念与实现
节流指的是在一定时间内，函数只会执行一次，无论这段时间内触发了多少次。比如页面滚动加载更多，即使滚动过程中触发了很多次滚动事件，也只会在指定时间间隔内执行一次加载逻辑，避免重复请求数据。
时间戳版节流实现
通过记录上一次执行函数的时间戳，判断当前时间是否达到间隔要求：
function throttle(fn, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
// 如果距离上次执行的时间大于等于间隔，就执行函数
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
定时器版节流实现
也可以通过定时器的方式实现节流，确保间隔时间内只执行一次：
function throttle(fn, interval) {
let timer = null;
return function(...args) {
// 如果定时器不存在，才设置新的定时器
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, interval);
}
};
}
节流使用示例
以页面滚动加载为例，使用节流函数优化滚动事件：
// 模拟加载更多数据的函数
function loadMore() {
console.log('加载更多数据');
}
// 创建节流后的加载函数，每1000毫秒最多执行一次
const throttledLoadMore = throttle(loadMore, 1000);
// 绑定滚动事件
window.addEventListener('scroll', () => {
// 简单判断滚动到页面底部
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
throttledLoadMore();
}
});
防抖和节流的区别与适用场景
两者的核心区别如下：
- 防抖是将多次执行变为最后一次执行，适合连续触发后只需要一次结果的场景
- 节流是将多次执行变为每隔一段时间执行一次，适合固定间隔内需要执行的场景
常见的适用场景总结：
| 方案 | 适用场景 |
|---|---|
| 防抖 | 搜索框输入联想、表单输入验证、窗口resize后重新计算布局 |
| 节流 | 页面滚动加载、鼠标移动拖拽、射击游戏射击频率控制 |
注意事项
在实际使用时需要注意以下几点：
- 防抖和节流函数都使用了闭包，要避免在不需要的时候保留引用，防止内存泄漏
- 如果需要防抖/节流的函数有返回值，上面的基础实现无法获取返回值，需要额外处理
- 可以根据需求扩展防抖函数，比如添加立即执行的选项，第一次触发就先执行一次，之后再防抖
合理使用防抖和节流可以有效提升前端页面的性能，减少不必要的计算和网络请求，是前端开发中非常实用的优化技巧。
javascript防抖节流函数优化修改时间：2026-06-15 07:51:17