防抖与节流

在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；
节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。

节流

节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

data() {
      return {
            timer: null,
            input: null, // 页面绑定的值
      }    
}
methods: {
      throttle() {
        clearTimeout(timer)
        this.timer = setTimeout(() => {
          // 发请求到后台
          console.log(this.input);
        }, 500)
      } 
}

防抖

防抖的实现思路：每次触发事件时都取消之前的延时调用方法：

data() {
      return {
            flag: false,
            input: null, // 页面绑定的值
      }    
}
methods: {
      debounce() {
        if (this.flag) {
          return false
        }
        this.flag = true
        setTimeout(() => {
          // 发请求到后台
          console.log(this.input);
          this.flag = false
        }, 500)
      }   
}