防抖和节流是JavaScript中优化高频事件的两种手段。防抖通过延迟执行，确保事件停止触发一段时间后才执行函数，适用于搜索框输入等场景；节流则保证函数在固定时间间隔内最多执行一次，适用于滚动监听、动画更新等需规律执行的场景。两者核心区别在于：防抖强调最后一次触发有效，节流强调周期性执行。掌握它们可显著提升性能与用户体验。
在JavaScript中，防抖（Debounce）和节流（Throttle）是两种常见的优化手段，用于控制函数的执行频率，避免因频繁触发而影响性能。它们常用于处理如窗口滚动、调整大小、输入框输入等高频事件。
防抖（Debounce）原理与实现
防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。 换句话说，只要事件持续触发，函数的执行就会被不断推迟，直到事件停止触发一段时间后才真正执行一次。
举个例子：用户在搜索框连续输入时，我们不希望每次输入都发送请求，而是等待用户停顿超过一定时间后再发起搜索请求，这就是防抖的应用场景。
实现方式：
立即学习“Java免费学习笔记（深入）”；
通过定时器延迟函数执行，每次触发时清除之前的定时器，重新设置新的定时器。
以下是一个基础的防抖函数实现：
function debounce(func, delay) {
let timer;
return function (…args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
使用示例：
const searchInput = document.getElementById(‘search’);
searchInput.addEventListener(‘input’, debounce(function(e) {
console.log(‘搜索:’, e.target.value);
}, 300));
节流（Throttle）原理与实现
节流的核心思想是：规定一个函数在指定时间内最多执行一次。 即使事件被频繁触发，函数也只会按照固定的时间间隔执行，比如每100毫秒最多执行一次。
典型应用场景包括：页面滚动时监听位置变化、鼠标移动事件等，防止函数过于频繁地调用。
实现方式：
立即学习“Java免费学习笔记（深入）”；
可以通过时间戳或定时器来实现。时间戳方式更简单直观：记录上次执行时间，每次触发时判断是否已超过设定间隔。
以下是基于时间戳的节流实现：
function throttle(func, delay) {
let lastTime = 0;
return function (…args) {
const now = Date.now();
if (now – lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
使用示例：
window.addEventListener(‘scroll’, throttle(function() {
console.log(‘页面滚动中…’);
}, 100));
防抖与节流的区别总结
虽然两者都是为了限制函数执行频率，但适用场景不同：
防抖适合“最后一次有效”的场景，如搜索框输入、按钮重复点击提交。节流适合“规律性执行”的场景，如滚动监听、动画更新、游戏帧率控制。
简单理解：防抖是“等你不打了我才打”，节流是“我每隔一段时间打一次，不管你打多少”。
基本上就这些。掌握这两个模式，能有效提升前端性能和用户体验。
以上就是JavaScript中的防抖与节流函数原理与实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533473.html
微信扫一扫 
支付宝扫一扫 
