JS的防抖动和节流

使用防抖动和节流原因

在为dom绑定一些事件（resize、scroll、input）时，可能会由于用户操作反复触发函数造成资源的浪费，这时候可通过函数防抖和函数节流的避免重复触发事件回调。

防抖动

原理：在第一次触发事件后，设置一个定时器，定时器结束后再执行真正需要执行的方法，若定时器未结束时事件再此被触发，则将之前的定时器消除，再次设置定时器重复以上过程。
代码：

function debounce (fun, delay = 1000) {
	let timer = null;
	return function (args) {
		let that = this
		if (timer) clearTimeout(timer) 
		timer = setTimeout(function () {
			fun.call(that, args)
		}, delay)
	}
}

节流

原理：在第一次触发事件后，立即执行事件回调函数，下一次触发该事件则判断触发时间与上一次执行事件回调的事件，则时间差已超过一定的间隔则可再次执行事件回调函数。

function throttle (fun, delay = 500) {
	let prev = new Date()
	return function (args) {
		let now = new Date（）
		let that = this
		if (now - prev > delay) {
			fun.call(that, args)
			prev = now
		}
	}
}