防抖和节流的原理及实现

防抖

当事件被触发时，防抖的作用是在一定的时间延迟后才执行函数。如果在这段时间内又触发了相同的事件，则会取消前一个事件的执行，并重新开始计时，直到延迟时间结束才执行函数。

例如，在输入框中输入搜索关键词时，我们希望在用户停止输入一段时间之后才开始搜索，以减少服务器压力和提高用户体验。这时候就可以使用防抖来实现。

function debounce(fn, delay) {
  let timerId = null;
  return function(...args) {
    if (timerId) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn.apply(this, args);
      timerId = null;
    }, delay);
  };
}

以上代码中，fn 是需要防抖的函数，delay 是延迟时间。返回的是一个新的函数，该函数会在延迟时间内只执行一次 fn，并且如果在延迟时间内再次调用该函数，则会取消前一个调用。

节流

节流的作用是使函数执行在固定的时间间隔内，例如每隔100ms执行一次函数。如果在这段时间内又触发了相同的事件，则该事件会被忽略，直到下一个时间间隔再执行函数。

例如，在页面滚动时，我们希望每隔一定时间才触发一次滚动事件的处理函数，以减少页面卡顿和提高性能。这时候就可以使用节流来实现。

function throttle(fn, delay) {
  let timerId = null;
  let lastExecTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecTime < delay) {
      if (timerId) {
        clearTimeout(timerId);
      }
      timerId = setTimeout(() => {
        fn.apply(this, args);
        timerId = null;
        lastExecTime = Date.now();
      }, delay - (now - lastExecTime));
    } else {
      fn.apply(this, args);
      lastExecTime = now;
    }
  };
}

以上代码中，fn 是需要节流的函数，delay 是固定时间间隔。返回的是一个新的函数，该函数会在固定时间间隔内执行 fn，并且如果在该时间间隔内再次调用该函数，则会被忽略。