手写防抖和节流

防抖（debounce）

• 在规定时间内，频繁触发事件，只执行最后一次。

function debounce(fn, delay) {
  // 定义一个定时器
  let timer = null;

  return function () {
    // 取消上一次的定时器
    if (timer) clearTimeout(timer);
    // 延迟多少秒执行传进来的函数方法
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

let input = document.getElementById("input");
input.addEventListener("input", debounce(changeValue, 2000));

function changeValue() {
  console.log("change");
}

节流（throttle）

• 在规定时间内，频繁触发事件，只执行一次。

function throttle(fn, delay) {
  // 定义一个定时器
  let timer = null;

  return function () {
    if (!timer) {
      // 延迟多少秒执行传进来的函数方法，执行完成后将定时器置空
      timer = setTimeout(() => {
        fn();
        timer = null;
      }, delay);
    }
  };
}

let box = document.getElementById("box");
box.addEventListener("touchmove", throttle(moveBox, 2000));

function moveBox() {
  console.log("move");
}