练习：节流与防抖

JS Bin代码

函数节流：

在一段时间内，函数只允许执行一次，类似技能进入冷却状态，冷却结束后，才可再次执行

// 节流
function throttle(fn, delay){
  var canUse = true;
  return function(){
    if(canUse){
      fn()
      canUse = false
      setTimeout(function(){
        canUse = true
      }, delay)
    }
  }
}

var fn = throttle(function(){
  console.log("节流")
}, 3000)

// 用户连续点击，也得等函数执行完后3秒才能执行
btn.addEventListener("click", fn)

函数防抖：

函数放在定时器中，时间到了就会执行函数，但是如果定时器结束前又需要执行相同的函数，那就关闭前一个定时器，重新计时，后面以此类推

//防抖
function debounce(fn, delay){
  var timer = null
  return function(){
    if(timer){
      window.clearTimeout(timer)
    }
    timer = setTimeout(function(){
      fn() 
      timer = null
    }, delay)
  } 
}
var fn2 = debounce(function(){
  console.log("防抖")
}, 2000)

// 用户点击间隔小于2秒，fn2就一直不会执行
btn2.addEventListener("click", fn2)