js 节流&防抖

1. 看门狗：点击多次， 执行一次网络请求。设立属性flag 判断

let flag = true
if (flag) {
    flag = false
    
    setTimeout(function () {
        flag = true
     }, 2000)
}

2. 防抖：触发事件，一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行。总之，就是要等你触发完事件 n 秒内不再触发事件

   触发事件 n 秒后才执行 -> n 秒内又触发事件 -> 以新的事件的时间为准

   创建一个共有定时器timeout, 1. 清除此定时器 2. 此定时器重新赋值。这种模式使用 一段时间操作什么的情况

function debounce(func, wait, immediate) {
  let timeout;

  return function () {
    let context = this;
    let args = arguments;

    if (timeout) clearTimeout(timeout);
    if (immediate) {
      let callNow = !timeout;
      timeout = setTimeout(function () {
        timeout = null;
      }, wait);
      if (callNow) func.apply(context, args);
    } else {
      timeout = setTimeout(function () {
        func.apply(context, args);
      }, wait);
    }
  };
}

3. 节流：触发事件，一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，此次触发事件无效。

   触发事件 n 秒后才执行 -> n 秒内又触发事件 -> 此次触发事件无效

// 使用时间戳
function throttle(func, wait) {
  let preTime = 0;

  return function () {
    let nowTime = +new Date();
    let context = this;
    let args = arguments;

    if (nowTime - preTime > wait) {
      func.apply(context, args);
      preTime = nowTime;
    }
  };
}

// 定时器实现
function throttle(func, wait) {
  let timeout;

  return function () {
    let context = this;
    let args = arguments;

    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}