本文深入解析 JavaScript 中函数防抖（debounce）与节流（throttle）的核心概念与应用场景。通过对比表单校验、按钮提交及滚动监听等高频触发场景，阐明两者在控制回调执行频率上的差异。文章提供了基于 setTimeout 的完整代码实现，并解析了闭包、this 指向及计时器重置等关键实现细节，帮助开发者根据实际需求选择合适的优化策略。
防抖与节流的使用场景区分
函数防抖和节流均旨在优化高频动作触发的回调函数，二者在实现逻辑上存在相似性。首先从具体的使用场景对两者进行区分。
防抖的典型使用场景包括：
- 表单输入框的实时校验
- 防止提交按钮被重复点击
节流的典型使用场景包括：
- scroll、mousemove、resize 等高频事件
函数防抖（debounce）原理与实现
函数防抖（debounce）
在表单输入框校验场景中，用户持续打字时并不需要立即向后台发送校验请求。只有当用户停止输入并经过一段指定时间后，系统才判定用户已完成输入，此时再向后台提交文本进行校验。
对于表单的提交按钮，当用户连续多次点击时，显然不需要每次点击都触发表单提交。正确的逻辑是仅在用户停止点击操作后，执行最后一次点击所对应的提交动作。
防抖函数的适用场景具有一个共同特征：高频触发并不会导致回调函数立即高频执行，而是只有在结束高频触发并经过一定时间间隔后，才执行最后一次触发的回调。
其代码实现相对简单：在短时间高频触发期间重置计时器，只有当计时器到达指定的等待时间后，才执行回调函数。
防抖函数代码实现
var debounce = function (func, wait) {
var timer;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
func.apply(self, args);
}, wait);
}
}
/**
这里使用闭包是为了保存计时器，而不是定义一个全局变量来存放计时器。apply的作用则是为了处理this指向和参数的传递，因为setTimeout会将this指向window。
*/函数节流（throttle）原理与实现
函数节流（throttle）
在触发频率极高的场景中，通常不需要以同样的高频来执行回调函数。此时需要人为控制回调函数的执行频率，使其以一个固定的、较低的频率执行。
其实现原理是记录第一次触发的时间，随后每次触发时都检查是否已到达指定的间隔时间。只有当时间间隔大于或等于指定值时，才再次执行回调函数，并重新开始记录触发时间。
可以通过时间戳记录并计算时间间隔，同样也可以使用计时器来控制时间间隔。
节流函数代码实现
var throttle = function (func, wait) {
var timer;
return function () {
var self = this, args = arguments;
if (!timer) {
timer = setTimeout(function () {
func.apply(self, args)
clearTimeout(timer)
timer = null;
}, wait)
}
}
}防抖与节流的可视化对比
最后通过一张图表直观对比防抖和节流函数在频率执行上的差异，以可视化方式展示其效果。
以上即为 JavaScript 函数防抖和节流的详细内容，更多关于 JavaScript 函数防抖和节流的资料请关注本站其它相关文章！