函数节流和函数防抖

前端经典面试题目：什么是函数节流，什么是函数防抖？

　　函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

　　　　栗子：有个需要频繁出发函数，处于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

　　案例:页面中有个滚动条，当我滑动滚动条时，会出发函数打印一句话，控制在0.2s以内只打印一次。

    html,body{
      height: 400%;
    }

 //  fn：要被节流的函数，delay:规定的时间
   function throttle(fn,delay){
    //  记录上一次函数触发的时间
     var lasttime = 0
     return function(){
      //  记录当前函数触发的时间
       var nowTime = Date.now()
       if(nowTime - lasttime > delay){
        //  修正this指向问题
         fn.call(this);
        //  同步时间
         lasttime = nowTime
       }
     }
   }
   document.onscroll = throttle(function(){
     console.log('滚动条被触发了' + Date.now())
    },200)

　　函数防抖：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效

　　案例：页面中有个按钮，点击按钮打印：按钮被点击了，如果在0.2s内点击了多次，也只打印一次（最后一次点击的生效）

  <button id="btn">按钮</button>

   function debounce(fn,delay){
    //  记录上一次的延时器
     var timer = null
     return function(){
      //  清除上一次延时器
       clearTimeout(timer)
      //  重新设置新的延时器
      timer = setTimeout(function(){
        fn.apply(this)
      },delay)
     }
   }
   document.getElementById('btn').onclick = debounce(function(){
    console.log('按钮被点击了')
   },200)