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

作者：纸飞机时间：2026-10-25 08:25:20浏览：273

本文详细解析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>

不然：

总结

到此这篇关于JavaScript防抖与节流的实现与注意事项的文章就介绍到这了,更多相关JS防抖与节流内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28