节流确保固定时间间隔内函数最多执行一次，适合scroll等持续触发场景；防抖则在事件停止后延迟执行，常用于搜索输入。两者均需注意this指向与手动取消支持，根据业务选择使用。
函数节流（throttle）和防抖（debounce）是处理高频事件的常用手段，比如窗口滚动、输入框搜索建议等。它们都能控制函数执行频率，但适用场景不同。
节流（Throttle）：固定时间只执行一次
节流确保一个函数在指定时间间隔内最多执行一次。即使事件频繁触发，函数也只会在每个周期开始或结束时执行一次。
实现思路是记录上次执行时间，每次触发时判断是否已超过设定间隔。
示例代码：
function throttle(fn, delay) {
let lastTime = 0;
return function (…args) {
const now = Date.now();
if (now – lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
这种写法简单高效，适合用于 scroll、mousemove 等持续触发但不需要每次都响应的场景。
防抖（Debounce）：只执行最后一次
防抖的核心是延迟执行，如果在等待期间再次触发，则重新计时。适用于用户完成操作后才需要响应的情况，如搜索输入建议。
使用定时器来管理延迟执行，并在每次调用时清除之前的定时器。
示例代码：
function debounce(fn, delay) {
let timer = null;
return function (…args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
这样能保证用户停止输入一段时间后，函数才真正执行一次。
增强功能：立即执行与取消支持
实际开发中可能需要更灵活的控制，比如希望第一次触发立刻执行，后续再进入防抖逻辑。
可以在 debounce 中加入 immediate 参数：
function debounce(fn, delay, immediate) {
let timer = null;
let isImmediate = immediate && !timer;
return function (…args) {
clearTimeout(timer);
if (isImmediate) {
fn.apply(this, args);
isImmediate = false;
timer = setTimeout(() => { isImmediate = true; }, delay);
} else {
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
}
};
}
还可以为节流和防抖函数添加 cancel 方法，用于手动清除状态。
使用建议与注意事项
选择 throttle 还是 debounce 取决于业务需求：
scroll、resize 用 throttle 更合适，保持一定频率更新input 搜索建议、按钮重复点击防护用 debounce 更自然注意 this 指向问题，使用 apply 或 call 绑定上下文避免在高频率场景下做复杂计算，即使加了节流/防抖
基本上就这些，不复杂但容易忽略细节。掌握核心原理后，可以根据项目需要扩展功能。
以上就是如何实现一个高效的函数节流(throttle)与防抖(debounce)函数？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523619.html
微信扫一扫 
支付宝扫一扫 
