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

目录

• 概念
• 实现
• 测试
• 注意事项
• 总结

概念

防抖：点击N次提交按钮，只有最后一次会发出请求。减少无效请求的次数。

节流：每点击一次按钮，都会失效一段时间。降低触发的频率。

实现

/*
防抖
时限内，只有最后一次调用会执行
*/
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>

不然：

总结