Throttle(节流)、Debouce(防抖)

防抖：input 输入停止 1000ms 后触发
节流：send 频繁点击，在 1000ms 内只触发一次

dog

<input id=msg value="hello">
<button id=btn>send</button>

const click = (event) => { console.log("send msg: ", msg.value) }
const input = (event) => { console.log("value: " + msg.value) }

msg.addEventListener('click', throttle(click, 1000))
btn.addEventListener('input', debounce(input, 1000))

throttle

const throttle = (fn, delay) => {
  let timer = null;

  return function () {
    const ctx = this;
    const args = arguments;

    if (!timer) {
      fn.apply(ctx, args);
      timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
      }, delay);
    }
  };
};

debounce

const debounce = (fn, delay) => {
  let timer = null;

  return function () {
    const ctx = this;
    const args = arguments;

    if (timer) {
      clearTimeout(timer);
      timer = null;
      return;
    }

    timer = setTimeout(() => {
      fn.apply(ctx, args);
      clearTimeout(timer);
      timer = null;
    }, delay);
  };
};

Previous

图片的显示问题

Next

EventHub