JS中的节流与防抖：让代码更高效

前端

2023-11-11 05:48:29

在JavaScript中，节流和防抖是两种强大的技术，可以优化高频率执行的代码，从而提高性能并节省资源。

节流函数通过限制函数调用的频率，在一定时间间隔内只执行一次函数，即使在该时间间隔内事件被触发多次。这对于处理用户频繁交互的事件非常有用，例如滚动、调整窗口大小或在输入字段中键入。

防抖函数通过延迟函数的执行，直到事件停止触发一段预定的时间。这对于处理只在事件停止后才需要执行的事件非常有用，例如在完成文本输入后提交表单或在停止滚动后加载新内容。

优化高频事件处理

高频事件会频繁触发回调函数，导致性能下降。节流和防抖通过控制函数调用的频率和延迟来优化这些事件处理。

节流

在节流函数中，一个计时器限制了函数在给定时间间隔内只能被调用一次。即使在该时间间隔内触发了多次事件，函数也只会被调用一次。

const throttle = (callback, delay) => {
  let lastCall = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    callback(...args);
  };
};

防抖

防抖函数会延迟函数的执行，直到事件停止触发一段预定的时间。当事件停止触发时，函数会被调用一次。

const debounce = (callback, delay) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback(...args);
    }, delay);
  };
};