[JavaScript知识库]js中的防抖和节流

1、前言

在前端开发的工作中，我们经常需要给一些事件绑定处理函数，如click、resize、scroll、mousemove等，但是当我们给一些事件绑定了处理函数时，它会持续的触发处理函数，如果处理函数内部有对DOM的操作的话可能就会由于频繁的操作DOM导致浏览器的挂起，甚至崩溃。

2、什么是防抖节流

防抖和节流就是为了解决上述问题的两种函数。

1、防抖函数

防抖函数的原理：事件在被触发后n秒执行，如果该事件在n秒内又被重新触发，则会重新计时。防抖函数一共接收两个参数，一个是处理函数，还有一个是处理函数延时执行的时间。

function debounce(handle, deplay) {
	let timer = null;
	return function() {
		clearTimeout(timer);
		timer = setTimeout(() => {
			handle.apply(this);
		}, deplay)
	}
}

适用场景：防止表单的多次提交，只执行最后一次的提交操作。

节流函数

节流函数的原理：规定在一个时间段里触发函数只执行一次，在这个时间段里多次触发执行函数，是无效的。节流函数一共接收两个参数，一个是处理函数，还有一个是处理函数延时执行的时间。

function throttle(handle, deplay) {
	let flag = true;
	return function() {
		if(!flag) return;
		flag = false;
		setTimeout(() => {
			flag = true;
			handle.apply(this);
		}, deplay)
	}
}

实用场景：监控浏览器的resize，拖拽场景（固定时间内只执行一次，防止高频触发位置变动）。

3、小结

防抖和节流函数主要都是通过闭包，定时器和apply实现的。一开始实现防抖节流函数的时候没有使用apply改变this指向，感觉不影响功能，后来发现如果在处理函数中有获取绑定事件dom属性的操作，不使用applay改变this指向是获取不到当前绑定事件的DOM的。