Vue中的性能优化防抖和节流

在vue中的防抖和节流怎么用？

防抖与节流概念
函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

函数防抖（debounce）与函数节流（throttle）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象
1、防抖(debounce)
在Vue项目中input框的性能优化
例子：搜索功能input框的关键字搜索 输入框搜索 只在最后发送请求

  watch: {
    searchVal (newVal, oldVal) {
      // 判断有没有输入值没有就不发送搜索
      // 在500ms内输入 是不会触发请求
      if (newVal) {
        // 防抖 
        // 清除计时器
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.searchIndex(newVal)
        }, 500)
      }
    }
  },

2.节流（throttle）
使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

export function throttle(fn,times) {
    var canRun = true; // 通过闭包保存一个标记
    var times = 500;// 第二参数设置延迟时间
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, times);
    };
}

防抖和节流都可以用于 mousemove、scroll、resize、input等事件，他们的区别在于防抖只会在连续的事件周期结束时执行一次，而节流会在事件周期内按间隔时间有规律的执行多次。

参考相关阅读