节流和去抖动 - 解释

各位读者好！今天我在网上了解了节流效应，一开始有点困惑，因为它的定义和去抖动很像。
但经过进一步的阅读和研究，我明白了节流和去抖动之间的区别。

在本文中，我想与大家分享这些知识。

介绍

节流和去抖动是用于控制函数调用速率的技术，特别是在频繁事件（如用户交互）可能导致过多调用并可能影响性能的情况下。

节流

节流限制了函数在一定时间段内的执行次数。它确保函数以受控的、稳定的速率被调用，无论触发该函数的事件发生的频率如何。

去抖动

去抖动是一种将函数的​​执行延迟到上一个事件发生后经过一定时间的技术。当你希望函数在一段时间不活动后被调用时，它非常有用，并且可以防止快速连续的调用。

还是感到困惑？🤔 以下是节流和去抖动之间主要区别的细分。

1.执行行为

节流：节流是指函数以固定的时间间隔执行。即使触发事件发生得更频繁，函数也会按照定义的时间间隔调用。

去抖动：在去抖动中，函数仅在上一个事件发生后经过特定延迟后执行。如果在延迟时间内发生了新的事件，则计时器将重置，函数的执行将进一步延迟。

2. 用例

节流：节流适用于需要限制函数调用频率的场景，例如处理滚动事件或调整大小事件。它有助于避免频繁更新导致系统过载。

去抖动：当你想在触发某个函数之前等待事件暂停时，去抖动是理想的选择。这在搜索建议等情况下非常有用，因为你需要等待用户完成输入后再获取建议。

3. 实施

节流：节流通常涉及使用计时器或时间戳在函数调用之间设置固定间隔以跟踪上次调用时间。

去抖动：去抖动是指在事件发生时启动计时器，并在延迟时间内每当发生新事件时重置计时器。该函数在最后一个事件发生后计时器到期时执行。

让我们看一些代码示例来加深理解

节流示例

假设你有一个网页，其中有一个滚动事件，它会触发某些操作，例如加载更多内容。如果没有节流，如果用户快速滚动，该操作可能会被快速连续地触发多次。节流可以确保该操作以固定的时间间隔执行。

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

const throttledScrollHandler = throttle(() => {
  console.log("Loading more content...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);

在这个例子中，throttle 函数包装了原始函数（scrollHandler）并确保无论用户滚动的速度有多快，它每 1000 毫秒（1 秒）最多调用一次。

防抖示例

假设您有一个搜索输入字段，它会在用户输入时触发 API 调用来获取搜索结果。如果没有去抖动功能，每次用户按键时都会触发 API 调用，从而导致请求过多。去抖动功能可确保仅在用户暂停输入后才触发 API 调用。

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

const debounceSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
  // Make API call with the search query
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debounceSearch(event.target.value);
});

在此示例中，防抖动函数确保在用户停止输入后 300 毫秒发出 API 调用。如果用户继续输入，则计时器将重置，以防止 API 调用触发过于频繁。

与我联系

• LinkedIn
• GitHub