什么是防抖和节流? 有什么区别? 如何实现?

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
每次触发事件时都判断当前是否有等待执行的延时函数
只有等前一次有效触发结束后才能进行新的有效事件触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const btn = document.getElementById('btn');
function sayHi() {
	console.log('节流测试');
}
function throttle(fn) {
	let disable = true;
	return function () {
		if (!disable) return;
		disable = false;
		setTimeout(() => {
			fn.apply(this, arguments);
			disable = true;
		}, 500);
	}
}
btn.onclick = throttle(sayHi);

节流示例

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
每次触发事件时都取消之前的延时调用方法
如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function debounce(fn) {
	let timer = null;
	return function () {
		clearTimeout(timer);
		timer = setTimeout(() => {
			fn.apply(this, arguments);
		}, 500);
	}
}
function sayHi(e) {
	console.log('防抖成功');
	console.log(e.target.value);
}
const inp = document.getElementById('input');
inp.oninput = debounce(sayHi);

防抖示例

节流和防抖的区别

节流会阻止事件的触发
防抖会将事件的执行延后

学习参考