vue项目中的去抖与节流

节流

// fn是我们需要包装的事件回调, interval是时间间隔的阈值
function throttle(fn, interval) {
  let last = 0; // last为上一次触发回调的时间
  // 将throttle处理结果当作函数返回
  return function() {
    let context = this; // 保留调用时的this上下文
    let args = arguments; // 保留调用时传入的参数
    let now = +new Date(); // 记录本次触发回调的时间
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = now;
      fn.apply(context, args);
    }
  };
}
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log("触发了滚动事件"), 1000);
setInterval(() => better_scroll(), 0);

去抖

let setTimer;
let shake = function() {
  clearTimeout(setTimer);
  setTimer = setTimeout(() => {
    console.log("这里是实际的业务代码");
  }, 0);
};

let interTimer = setInterval(() => {
  shake();
}, 0);

let timer = setTimeout(() => {
  clearInterval(interTimer);
  clearTimeout(timer);
  timer = null;
  interTimer = null;
}, 2000);