节流和防抖

节流和防抖

节流

节流就是每隔一段时间就执行一次函数，方法是设置一个定时器，n秒后执行事件并重置定时器。

点击一个div，会产生一个随机数（工作中一般是请求接口或者跳转页面）

let box = document.querySelect('#box'), t = null, time = 1000

box.onclick = function(){
  if(!t){
    t  = setTimeout(() => {
      box.innerHTML = (Math.random()*100).toFixed(0)
      clearTimeout(t)
    },time)
  }
}

防抖

执行完动作后启动定时器，n秒后执行函数，如果函数还未执行又重新执行动作，则计时器重置。

输入框搜索

let t = null,time = 1000
input.onkeyup = function(){
  if(t) clearTimeout(t)
  t = setTimeout(() => {
      queryInputDate()
  },time)
}