JavaScript防抖与节流的实现与注意事项

作者：纸飞机

时间：2026-10-25

本文详细解析JavaScript中防抖与节流的核心概念、实现原理及代码示例。通过对比立即执行与延时执行两种节流模式，展示如何有效减少无效请求并降低触发频率。重点指出基于闭包实现的常见错误写法，帮助开发者避免变量共享导致的逻辑缺陷，确保函数调用的正确性。

文章目录

概念

防抖机制的核心在于：在用户连续触发多次事件（如点击提交按钮）时，仅响应最后一次操作发出的请求，从而有效减少不必要的网络请求次数。

节流机制则强调：每次触发事件后，该事件在指定时间段内失效，通过限制单位时间内的触发次数来降低事件处理的频率。

实现

/*
防抖
时限内，只有最后一次调用会执行
*/
function debounce(func, interval = 0) {
	let timer;
	return function () {
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			func()
		}, interval)
	}
}
/*
节流
执行之后会失效一段时间
*/
function throttle(fn, interval=0, immediate=true) {
	let valid = true
	return function () {
		if (!valid) {
			return
		}
		valid = false
		if (immediate) {
			fn()
			setTimeout(() => {
				valid = true;
			}, interval)
		} else {
			setTimeout(() => {
				fn()
				valid = true;
			}, interval)
		}
	}
}

测试

function say() {
	console.log(1)
}
var a = debounce(say, 1000)
var b = throttle(say, 1000)
var c = throttle(say, 1000, false)

<button onclick="a()">测试防抖</button>
<button onclick="b()">测试节流一</button>
<button onclick="c()">测试节流二</button>

效果：

防抖。

节流，立即执行。

节流，延时执行。

注意事项

原理：闭包。每调用一次都会对应一个闭包。

不能够像下面这样写：

<button onclick="debounce(say, 1000)()">测试防抖</button>
<button onclick="throttle(say, 1000)()">测试节流一</button>
<button onclick="throttle(say, 1000, false)()">测试节流二</button>

不然：