函数防抖与节流 JS函数防抖与节流

先介绍概念，函数防抖与节流

函数防抖

概念

某个函数在n秒后执行，假如在n秒之内又有事件被触发了，则重新开始计时。
例如：人进入电梯之后，电梯门从人进入到关上门再到开始上下运行中间花费的时间为10秒，假如在这10秒之内又有其他的人进入电梯了，那之前的时间计算就会被终止并重新开始计算。也就是在某段时间之内一个事件被触发多次，只有最后一次会被执行
适用场景：表单提交时假如用户疯狂的快速多次点击提交按钮时，使用函数防抖只会让最后一次的点击事件被触发，即：表单提交事件只执行一次。

代码如下：

function debounce(fn, wait) {
	let timer = null;
	return function() {
		if (timer) {
			clearTimeout(timer);
		}
		const args = arguments;
		timer = setTimeout(() => {
			fn.apply(this, args);
		}, wait)
	}
}

从以上代码来看，debounce函数返回了一个匿名函数（注意不能写成箭头函数），不能改变fn函数的上下文执行环境，且使用了一个闭包将timer这个变量封存了起来。所以每次能进行清除及赋值操作。

函数节流

概念

函数节流就是相同时间间隔内某个事件只能执行依次。
例如：浏览器滚动条的滚动事件window.onscroll 这个函数。一旦滚动条发生了滚动之后，每隔几十毫秒就会触发一次。触发的频率越高要处理的操作就要重复执行多次，就会造成卡顿等现象。
解决办法：通过函数节流让浏览器滚动条的事件在触发之后，隔稍长的一段时间再去执行回调函数，降低事件的执行频率。

代码

function throttle(fn, wait) {
	let prev = new Date();
	return function() { 
	    const args = arguments;
		const now = new Date();
		if (now - prev > wait) {
			fn.apply(this, args);
			prev = new Date();
		}
	}
}