防抖与节流(原生JS)

• 正常情况下，当函数出发频率高时，每触发一次函数，就会触发回调，如果函数中有计算量较大的情况，浏览器就会出现卡顿现象。
• 防抖：前面所有的触发都会取消，最后一次的执行在规定的时间之后才会触发     频繁触  =>  只执行一次
  （回调是最后一次触发的回调）
• 节流：在规定的时间间隔范围内，不会触发多次回调，只有大于这个时间才会触发回调。频繁触发  => 少量触发
  （回调是第一次触发的回调）

防抖：（比如模糊查询）

<el-input @change='changeInput('疯狂输入触发change')' />
data() {
    return {
      statu: true, // 防抖标识
      setTime: null // 定时器
    }
  },
methods：{
 changeInput() {
      var that = this
      // 如果为否，删除定时器
     if (!that.statu) {
        clearTimeout(this.setTime)
      }
      // 改为否
      that.statu = false
      // 定时两秒
       this.setTime = setTimeout(function() {
        console.log(两秒后触发，如果定时两秒内再次触发，此次会被清除)
        that.statu = true
      }, 2000)
   }
}

防抖更新：定时器要放在全局data里面，否则clearTimeout的时候找不到 

节流： （比如用户疯狂放技能）

<el-button @click='clickBtn'>疯狂放技能 <el-button> 
data() {
    return {
      statu: true, // 节流标识
    }
  },
methods：{
 clickBtn(query) {
      var that = this
      // 如果为否，直接return
      if (!that.statu) {
        return
      }
      // 改为否
      that.statu = false
      console.log('立刻触发，且定时的两秒内不再触发第二次');
      // 定时两秒
      setTimeout(function() {
        that.statu = true
      }, 2000)
   }
}