Vue 防抖和节流

防抖：比如股票交易用户不小心连续点了两次下达，为了避免下两笔单子，设置防抖，设置一个时间比如1s，在点击下达后等1s,如果1s内没有再次点下达，就可以成功下达指令了。如果又点了下达，重置1s的等待时间，再等1s,如果这1s没有点击，那就下达指令。

简单实现的逻辑代码：
公共函数utils.js里面写方法

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn, delay) {
  let timer = null //借助闭包
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(fn, delay) // 简化写法
  }
}

vue里面button按钮点击事件引用：

buttonClick: utils.debounce(function () {
   console.log("123");
}, 1000),

节流：顾名思义节省资源，比如多次点击下达，设置1s,第一次下达后，需要等到1s后才能再次下达。

/*
* fn [function] 需要节流的函数
* delay [number] 毫秒，节流期限值
*/
function throttle(fn, delay) {
  let valid = true
  return function () {
    if (!valid) {
      //休息时间 暂不接客
      return false
    }
    // 工作时间，执行函数并且在间隔期内把状态位设为无效
    valid = false
    setTimeout(function () {
      fn();
      valid = true;
    }, delay)
  }
}

buttonClick: utils.throttle(function () {
 	console.log("123");
}, 1000),