js中函数的防抖和节流

为什么要防抖和节流？

在做项目过程中，我们会绑定持续触发的事件，像鼠标移动事件mousemove，滚动条scroll，还有移动端的触摸事件touchmove等等，这些事件得频繁触发，就会导致浏览器出现卡顿情况，严重的话会导致浏览器崩溃。因此，就出现了函数的防抖和节流来解决这个问题。

函数防抖

当某事件频繁被触发时，在延迟的一定时间段内，该事件没有再次被触发，就会执行事件处理函数，防抖就是将多次执行变为最后一次执行，只会触发一次。

function debounce (fun, wait) {
	let timeout = null;
	return function() {
		if(timeout) {
			clearTimeout(timeout); //清除定时器
		}
		timeout = setTimeout( ()=> {
			fun.apply(this, arguments);
		}, wait)
	}
}

函数节流
当某事件频繁被触发时，周期性的执行事件处理函数，就是将多次执行变为每隔一段时间之后再执行。

function throttle () {
     let timer = null;
	 return function() {
	    if (!timer) {                   
	       timer = setTimeout(() => {       
             	fun.apply(this, arguments);                       
             }, delay);              
	       }      
	    }
     }