防抖和节流是优化高频事件的两种手段。防抖通过延迟执行，确保事件停止触发后才执行一次回调，适用于搜索输入等场景；节流则保证在指定时间间隔内最多执行一次函数，适合滚动监听等需稳定频率的场景。两者核心区别在于：防抖关注最终状态，节流注重规律执行。根据需求选择可显著提升性能与体验。
在处理高频触发事件时，比如窗口缩放、滚动、输入框输入等，直接执行回调会导致性能问题。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，用来控制函数的执行频率。
防抖（Debounce）
防抖的核心思想是：在事件被触发后，设置一个延迟，如果在这个延迟内事件再次被触发，则重新计时。只有当事件停止触发超过指定时间后，才会执行一次回调。
适用于搜索建议、按钮重复点击、窗口resize等场景。
示例实现：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, delay) {
let timer;
return function (…args) {
const context = this;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
使用方式：
const sayHello = () => console.log(“Hello!”);
const debouncedSayHello = debounce(sayHello, 500);
window.addEventListener(‘resize’, debouncedSayHello);
节流（Throttle）
节流的核心思想是：规定一个单位时间，在这个时间内，最多只执行一次函数。无论事件触发多少次，函数都会按照固定间隔执行。
适用于滚动加载、鼠标移动、点击提交等需要稳定执行频率的场景。
示例实现（时间戳方式）：
function throttle(func, delay) {
let previous = 0;
return function (…args) {
const now = Date.now();
const context = this;
if (now – previous >= delay) {
func.apply(context, args);
previous = now;
}
};
}
另一种实现（定时器方式）：
function throttle(func, delay) {
let timer;
return function (…args) {
const context = this;
if (!timer) {
timer = setTimeout(() => {
func.apply(context, args);
timer = null;
}, delay);
}
};
}
使用方式：
const logPosition = () => console.log(window.scrollY);
const throttledLog = throttle(logPosition, 100);
window.addEventListener(‘scroll’, throttledLog);
区别与选择
防抖强调“最后一次有效”，适合事件频繁触发但只需响应最终结果的场景。比如用户打字结束后再发起搜索请求。
节流强调“规律执行”，适合需要持续响应但不能太频繁的场景。比如页面滚动时监听位置更新。
根据实际需求选择合适的方式，能显著提升性能和用户体验。
基本上就这些，理解原理后可以根据项目需要扩展支持立即执行、取消功能等高级特性。
以上就是JavaScript防抖与节流函数实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529858.html
微信扫一扫 
支付宝扫一扫 
