throttle debounce

[OPY-bbt]

两者区别

对于连续触发的事件，防抖只是执行一次，节流是执行多次。

[OPY-bbt]

   function log(content) {
      console.log(content);
    }

    function debounce(fn) {
      let timer = null;

      return function() {
        if (timer) window.clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, 1000);
      }
    }

    function throttle(fn) {
      let canRun = true;

      return function() {
        if (!canRun) return;
        canRun = false;
        window.setTimeout(() => {
          fn.apply(this, arguments);
          canRun = true;
        }, 1000)
      }
    }

    const debounceLog = debounce(log);
    const throttleLog = throttle(log);

    let count = 0
    let timer = window.setInterval(() => {
      debounceLog('debounce log');
      throttleLog('throttle log');
      count++;
      if (count === 20) {
        clearInterval(timer);
      }
    }, 200);