防抖和节流

防抖

• 防止手抖多次触发事件，触发时会清空之前绑定方法，重新绑定并执行新的方法

• 场景：适用于多次点击查询按钮，查询输入框change查询事件

  let btn = document.querySelector('button')
  // 定义timer
  let timer = null
  btn.onclick = function() {
      // 清空timer
      clearTimeout(timer)
      // 重新赋值方法
      timer = setTimeout(() => {
          console.info('发送请求。')
      }, 1000)
  }
  

节流

• 节流防止多次触发事件，会按一定时间间隔执行方法

• 场景：适用于拖动事件

  let btn = document.querySelector('button')
  // 定义flag
  let flag = true
  btn.onclick = function() {
      // 判断flag值为真执行
      if (flag) {
         // flag赋值为false
         flag = false
         console.info('发送请求。。。')
         // 过一秒后flag值改为true
         setTimeout(() => {
             flag = true
         }, 1000)
      }
  }