防抖节流

防抖

• 在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

节流

• 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

const debounce = (fn, delay = 1000, immediate = true) => {
  let timer = null;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
    }

    if (immediate && !timer) {
      fn.call(this, ...args); 
    }
    timer = setTimeout(() => {
      if (!immediate) {
        fn.call(this, ...args);
      }
      clearTimeout(timer);
      timer = null;
    }, delay);
  }
}

const throttle = (fn, wait = 1000, { leading = true, trailing = true }) => {
  let previous = 0;
  let timer = null
  return function(...args) {
    let now = Date.now();
    if (!previous && leading === false) {
      previous = now;
    }
    let remaining = wait - (now - previous);
    if (remaining < 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      fn.call(this, ...args);
      previous = now;
    } else if (!timer && trailing) {
      timer = setTimeout(() => {
        fn.call(this, ...args);
        // 首次不执行，就把 previous = 0, 在上面条件中会设置为 now
        previous = leading === false ? 0 : Date.now();
        clearTimeout(timer);
        timer = null;
      }, remaining);
    }
  }
}

const btn = document.getElementById('button')
btn.addEventListener('click', throttle(btnClick, 1000, { leading: false })); 
// leading false 第一次不执行， true 第一次执行
// trailing false 最后一次不执行，true最后一次执行