防抖和节流应用

防抖 就是在某个事件发生以后，在固定的时间段内只会执行一次，如果在固定时间之内，再一次触发了这个事件，则会重新进行计时 (例如 在输入框中输入需要计算的参数)

或者说当用户停止操作并超过固定时间（500ms）即可触发该事件

第一种

<a-input @input="inputChange"></a-input>


// 定义input输入事件
inputChange(e){
  if(this.timer){
    clearTimeout(this.timer)
  }
  let that = this
  this.timer = setTimeout(()=>{
    console.log(e.target.value);
  },500)
},

第二种

Antishake(fn, ms = 500){
  let timer = null;
  return function (e) {
    clearTimeout(timer);
    timer= setTimeout(() => {
      fn(e);
    }, ms);
  };
},
inputChange:Antishake(function(e){
  console.log(12321,e.target.value);
},500),

节流 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效

应用场景  点击按钮后 3s内不可再次点击

<a-button @click="clickBtn" :disabled="flag">点击提交</a-button>

clickBtn(){
  let that = this
  if (that.flag) return 
  that.flag = true
  this.timer = setTimeout(()=>{
    console.log(111255656);
    that.flag = false
  },3000)
},