延时执行、立即执行：巧用防抖与节流优化用户体验

2023-12-02 05:13:55

延时执行与立即执行

在前端开发中，我们经常会遇到需要在特定事件发生后执行某个函数的情况，例如，当用户滚动页面时，我们可能需要更新页面上的内容。在传统的做法中，我们会在事件发生时直接执行函数，这种方式称为立即执行。然而，如果事件频繁发生，例如，当用户快速滚动页面时，立即执行可能会导致页面卡顿，因为浏览器必须在每次事件发生时都执行函数。

为了解决这个问题，我们可以使用延时执行的方式，即在事件发生后等待一段时间再执行函数。这样，浏览器就可以在一段时间内收集多个事件，然后一次性执行函数，从而避免了页面卡顿。

在JavaScript中，可以使用setTimeout()函数实现延时执行。例如，以下代码会在页面滚动后500毫秒执行updatePage()函数：

window.addEventListener('scroll', () => {
  setTimeout(() => {
    updatePage();
  }, 500);
});

防抖与节流

防抖和节流都是延时执行的变种，但它们有不同的实现方式和适用场景。

防抖

防抖的原理是，在事件发生后，如果在一段时间内没有再次发生，则执行函数。也就是说，防抖可以防止函数在短时间内被多次触发。

在JavaScript中，可以使用debounce()函数实现防抖。例如，以下代码会在用户停止滚动页面500毫秒后执行updatePage()函数：

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

window.addEventListener('scroll', debounce(updatePage, 500));

节流

节流的原理是，在事件发生后，只执行一次函数，然后在一段时间内屏蔽后续的所有事件。也就是说，节流可以确保函数在一段时间内只被执行一次。

在JavaScript中，可以使用throttle()函数实现节流。例如，以下代码会在用户每隔500毫秒滚动页面一次时执行updatePage()函数：

const throttle = (fn, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime >= delay) {
      fn(...args);
      lastCallTime = now;
    }
  };
};

window.addEventListener('scroll', throttle(updatePage, 500));