洞悉防抖节流的奥秘：优化前端性能，提升用户体验

2023-12-28 22:24:20

好的，请稍等，正在处理......

关于前端学习笔记（十九）--防抖和节流的文章已生成。

在前端开发中，我们经常会遇到需要对函数的调用频率进行控制的情况。比如，在处理用户输入时，我们不希望每次用户输入一个字符就触发一次函数调用，因为这会严重影响性能。为了解决这个问题，我们可以使用防抖和节流技术来优化函数的调用频率，从而提高性能和用户体验。

防抖和节流都是函数节流技术，但它们的工作方式不同。防抖会延迟函数的执行，直到满足某个条件（如等待一段时间或停止触发事件）后再执行函数。而节流会限制函数的执行频率，确保函数在一定时间内只执行一次。

防抖

防抖的原理是，如果在一段时间内多次触发函数，那么只有最后一次触发才会执行函数。这种技术常用于处理用户输入，如在搜索框中输入内容时，只有用户停止输入一段时间后，才触发搜索操作。

实现防抖的两种常见方法 ：

setTimeout() ：

function debounce(func, delay) {
  let timer;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
}

requestAnimationFrame() ：

function debounce(func, delay) {
  let requestId;
  return function () {
    const args = arguments;
    if (requestId) {
      cancelAnimationFrame(requestId);
    }
    requestId = requestAnimationFrame(() => {
      func.apply(this, args);
      requestId = null;
    });
  };
}

节流

节流的原理是，函数在一定时间内只执行一次，即使在此期间函数被多次触发。这种技术常用于处理事件，如在滚动页面时，只在页面滚动一定距离后触发函数。

实现节流的两种常见方法 ：

setTimeout() ：

function throttle(func, delay) {
  let lastCall = 0;
  return function () {
    const args = arguments;
    const now = Date.now();
    if (now - lastCall >= delay) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}

requestAnimationFrame() ：

function throttle(func, delay) {
  let requestId;
  let lastCall = 0;
  return function () {
    const args = arguments;
    const now = Date.now();
    if (now - lastCall >= delay) {
      if (requestId) {
        cancelAnimationFrame(requestId);
      }
      requestId = requestAnimationFrame(() => {
        func.apply(this, args);
        lastCall = now;
        requestId = null;
      });
    }
  };
}