防抖与节流

        在平时开发时，会有很多场景频繁触发事件，mousemove,resize,scroll等等，但是我们并不想频繁的触发这些事件，此时，就用到了防抖和节流 

以下面事件为例：

#box{

      height: 150px;

      line-height: 150px;

      text-align: center;

      color: #fff;

      background-color: #ccc;

      font-size: 80px;

    }

  <div id="box"></div>

 let num = 1

  let box = document.getElementById('box')

  function count() {

    box.innerText = num++

  }

 box.onmousemove = count  

一、防抖 

函数防抖：短时间内多次出发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行

包括两个版本：非立即执行版本、立即执行版本

① 非立即执行版本

        指出发时间后不会立即执行，而是在n秒后执行，如果在n秒内又触发了事件，则会重新计算函数执行时间

    // 触发-不动-n秒后-执行

    // 触发-一直动-等什么时候不再触发时-n秒后-执行 

 function debounce(func,wait){

     let timer

     return function(){

       let boxtext = this   // 闭包函数中this指向父作用域，父作用域中this指向window

       let args = arguments

       if(timer)clearTimeout(timer)

       timer = setTimeout(()=>{

         func.apply(this,args)

       },wait)

     }

   }

   box.onmousemove = debounce(