防抖 和 节流 以及区别

防抖：一个函数在需要频繁的触发情况时，只有在足够空闲的时间才执行一次。（启动一个计时器多长时间之后开始执行，当事件执行完毕后触发）
节流：一个函数只有在大于等于执行周期时才执行，周期内调用不执行。（保证一个时间段只执行一次，不会重新计时，当事件执行时固定时间频率出发一次）
/**
*防抖
*应用场景：实时搜索、拖拽
*变量没有写在外面是为了防止污染全局变量
*return新函数是为了防止变量写在里面以后每次函数调用都会产生一个新的计时器，这样防抖的作用就会失效
**/
function debounce(handler,delay){
      let timer = null;
      return function(){
            clearTimeout(timer);
            timer = setTimeout(()=>{
                  handler.apply(this,arguments)
            },delay)
      }
}

/**
*节流
*应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedown)
**/
/*时间戳形式的节流-会立即触发一次，后面会根据时间段依次触发*/
function throttle(handler,wait){
     let lastTime = 0;
     return function(){
           let newTime = new Date().getTime();
           if(newTime - lastTime > wait){
                 handler.apply(this,arguments);
                 lastTime = newTime;
           }
     }
}
/*计时器形式的节流-不会马上触发，事件触发后会根据时间段依次触发*/
function throttle(handler,wait){
     let timer;
     return function(){
     		if(timer) return
           	timer = setTimeout(()=>{
				handler.apply(this,arguments)
				timer = null
			}，wait)
     }
}