手写系列之JavaScript

1. 节流、防抖

// throttle
function throttle(fn, delay = 200) {
  let timer = null;
  return function () {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  }
}
const div = document.getElementById('div');
div.addEventListener('drag', throttle(function (e) {
  console.log(e.offsetX, e.offsetY);
}));

// debounce
function debounce(fn, delay = 500) {
  // timer 是闭包中的
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  }
}
const input = document.getElementById('input');
input.addEventListener('keyup', debounce((e) => {
  console.log(e.target);
  console.log(input1.value);
}, 1000));