免费网站制作推广莘县网站制作
个人博客：haichenyi.com。感谢关注
一. 目录
- 一–目录
- 二–防抖
- 三–节流
- 四–进阶应用
- 五–总结
二. 防抖（Debounce）
防抖（Debebounce）和节流（Throttle）都是前端开发中用于优化高频事件性能的两种技术。他们的核心目的是减少函数的不必要的调用频率，但实现方式和场景有所不同。
原理： 事件触发后，开始计时，若在规定时间内，没有再触发该事件，则执行事件。若在规定时间内，又触发了该事件，则重新计时。
适用场景： 输入框的搜索事件，窗口大小调整，按钮的点击事件等等
function debounce(func, delay) {let timer;return function (...args) {//清空上一次的定时器clearTimeout(timer)timer = setTimeout(() => {//绑定this关键字和参数，并立即执行//apply,call,bind三者的区别，前面的博客中讲过了func.apply(this, args)}, delay);}
}// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {console.log('发起搜索请求');
}, 500));
特点：
- 高频操作停止后才会执行
- 若高频操作不停止，则该事件永远不会执行
三. 节流（Throttle）
原理： 在规定时间间隔内，不论事件触发多少次，函数只会执行一次。
适用场景： 滚动事件（scroll）、鼠标移动（mousemove）、游戏中的射击频率限制等。
function throttle(func, delay) {let lastTime;return function (...args) {let now = Date.now()if (now - lastTime >= delay) {func.apply(this, args)lastTime = now}}
}// 使用示例
window.addEventListener('scroll', throttle(function() {console.log('处理滚动事件');
}, 200));
特点：
- 不管事件触发多少次，都按照固定频率执行，稀释执行的次数。
- 保证高频操作下函数周期性执行。
四. 进阶应用
（4.1）立即执行的防抖，第一次触发立即执行，后续触发防抖：
function debounce(func, delay) {let timer;return function (...args) {//如果timer是空，则立刻执行let immediately = !timer//第一次调用timer就是空，则立刻执行，短时间内再次触发，清空上一次的定时器，clearTimeout(timer)if (immediately) {func.apply(this, args)}timer = setTimeout(() => {timer = null}, delay);}
}
（4.2）头节流（Leading）：期望第一次触发立即执行
function throttle(func, delay) {let lastTime = 0;return function (...args) {let now = Date.now()// 计算剩余时间（若首次触发则剩余时间 <= 0）let remaining = delay - (now - lastTime)if (remaining <= 0) {func.apply(this, args)lastTime = now}}
}
（4.3）尾节流（Trailing）：保证最后一次触发，逻辑会执行
function throttle(func, delay) {let timer = null;return function (...args) {if (!timer) {timer = setTimeout(() => {func.apply(this, args)timer = null}, delay);}}
}
五. 总结
| 特性 | 防抖 | 节流 |
|---|---|---|
| 执行时机 | 高频事件结束后，规定时间内执行 | 高频事件按照频率执行 |
| 适用场景 | 输入框，提交按钮等 | 滑动事件，动画渲染 |
| 极端情况 | 持续触发，不会执行 | 持续触发时，函数按规律执行 |
防抖： 合并多次操作为一次，适合“最终状态”场景（如输入停止后搜索）。
节流： 稀释执行频率，适合持续高频事件（如滚动事件）。
推荐使用Lodash的方法，不需要自己手动去写，了解防抖节流的原理即可。