基于防抖和节流的性能优化

函数节流和函数防抖都是在限制被触发函数的执行次数，以解决函数触发频率过高导致浏览器响应速度跟不上出现的卡顿、延迟现象，这也就是前端的性能优化。

防抖：就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。

<div class="box"></div>
<script type="text/javascript">
	var box = document.querySelector('.box');
	box.onmousemove= debounce(move,200);
	function debounce(fn,await){
    
    
		var args = arguments;
		var now = !timmer;
		timmer &&clearTimeout(timmer);
		timmer= setTimeout(function(){
    
    
			timmer= null;
		},wait);
		if(now){
    
    
			fn.apply(this,args)
		}
	}
	function move(ev){
    
    
		this.innerHTML= ev.clientX;
	}
</script>

节流：就是指连续触发事件但是在一段时间中只执行一次函数。（例如mousemove、resize就是持续执行的事件）

<div class="box"></div>
<script type="text/javascript">
	var box = document.querySelector('.box');
	box.onmousemove= jl(move,500);
	function move(ev){
    
    
		this.innerHTML= ev.clientX;
	}
	function jl(fn,await){
    
    
		var last= 0;
		return function(){
    
    
			var args= arguments;
			var now = Date.now();
			if(now-last>await){
    
    
				fn.apply(this,args);
				last = now;
			}
		}
	}
</script>