防抖和节流是前端优化高频事件的两种手段：防抖通过延时执行，仅在事件停止触发后运行一次，适用于搜索输入等场景；节流则保证函数在指定时间间隔内最多执行一次，适合滚动监听等持续反馈需求。两者核心区别在于执行时机与频率控制，合理选择可显著提升性能。
在前端开发中，用户频繁触发事件（如窗口滚动、输入框输入、按钮点击）容易导致性能问题。为优化这类场景，防抖（Debounce）和节流（Throttle）是两种常用的函数控制手段。
防抖（Debounce）：只执行最后一次
防抖的核心思想是：当事件被触发时，设置一个定时器，若在规定时间内事件再次被触发，则清除原定时器并重新计时。只有当事件停止触发超过设定时间后，才会真正执行函数。
适用于搜索框输入建议、窗口大小调整、表单验证等只需响应“最终操作”的场景。
示例实现：
function debounce(func, wait) {
let timeout;
return function executedFunction(…args) {
const later = () => {
clearTimeout(timeout);
func.apply(this, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
使用方式：
立即学习“Java免费学习笔记（深入）”；
const searchHandler = debounce((query) => {
console.log(‘搜索:’, query);
}, 300);
// 每次输入都会重置计时
inputElement.addEventListener(‘input’, (e) => searchHandler(e.target.value));
节流（Throttle）：固定时间执行一次
节流的策略是：无论事件触发多频繁，函数在指定时间间隔内最多执行一次。比如每100ms只能执行一次处理函数。
适合用于监听页面滚动、鼠标移动、按钮高频点击等需要“匀速响应”的场景。
示例实现：
function throttle(func, delay) {
let inThrottle;
return function (…args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, delay);
}
};
}
使用方式：
立即学习“Java免费学习笔记（深入）”；
const scrollHandler = throttle(() => {
console.log(‘页面滚动中…’);
}, 100);
window.addEventListener(‘scroll’, scrollHandler);
关键区别与选择建议
防抖：连续操作中只响应最后一次，适合“最终结果”类需求，如自动保存、搜索建议。 节流：保证周期性执行，适合“持续反馈”类需求，如滚动加载、拖拽事件。 两者都能显著减少函数调用次数，提升性能，但逻辑不同，不可混用。 实际项目中可结合工具库（如 Lodash）中的 debounce 和 throttle 方法快速实现。
基本上就这些。掌握防抖和节流，能有效避免资源浪费，是 JavaScript 性能优化的基础技能之一。不复杂但容易忽略细节，理解原理才能灵活应用。
以上就是JavaScript防抖节流实现_javascript性能优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541133.html
微信扫一扫 
支付宝扫一扫 
