javascript中的防抖与节流

防抖（Debounce）和节流（Throttle）是两种常用的 JavaScript 函数优化技术，用于控制函数的执行频率和减少不必要的计算或网络请求。它们可以提高性能、优化用户体验，并减少资源消耗。

1. 防抖 (Debounce)：

• 防抖的基本思想是在函数被连续调用时，只执行最后一次调用，而忽略之前的调用。它适用于那些需要等待一段时间后执行的操作。
• 当调用函数后，会设置一个定时器，在指定的延迟时间后执行函数。如果在延迟时间内再次调用函数，则会清除之前的定时器并重新设置新的定时器。
• 这样可以确保函数在最后一次调用后的一段时间内没有被执行，避免不必要的计算或请求。
• 示例代码：

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

// 使用防抖函数包装需要执行的函数
const debouncedFunc = debounce(function() {
  // 执行操作
}, 300);

// 调用防抖函数
debouncedFunc();

2. 节流 (Throttle)：

• 节流的基本思想是在一段时间内限制函数的执行次数，例如每隔一定时间执行一次。它适用于那些需要保持函数执行节奏的操作。
• 当调用函数后，会设置一个定时器，在指定的时间间隔后执行函数。如果在时间间隔内再次调用函数，则函数不会被执行，直到时间间隔过去后才能再次执行。
• 这样可以控制函数的执行频率，避免过于频繁地执行，减少不必要的计算或请求。
• 示例代码：

function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const currentTime = Date.now();
    if (currentTime - lastTime > interval) {
      func.apply(this, args);
      lastTime = currentTime;
    }
  };
}

// 使用节流函数包装需要执行的函数
const throttledFunc = throttle(function() {
  // 执行操作
}, 300);

// 调用节流函数
throttledFunc();

  防抖和节流都是通过设置定时器来控制函数执行的时间间隔，它们的区别在于防抖会在最后一次调用后延迟执行，而节流会在每个时间间隔内只执行一次。

  在实际应用中，可以根据具体的需求选择使用防抖或节流来优化函数的执行。例如，对于输入框的实时搜索建议，可以使用防抖来减少频繁的搜索请求；对于滚动事件的处理，可以使用节流来控制滚动时的计算或渲染操作。

3. 案例

  当用户在搜索框中输入关键字时，可以使用防抖来减少频繁的搜索请求。只有在用户停止输入一段时间后，才进行实际的搜索操作。

• 防抖

// 创建防抖函数
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 模拟搜索函数
function search(keyword) {
  // 发起搜索请求
  console.log("Searching for:", keyword);
}

// 使用防抖函数包装搜索函数
const debouncedSearch = debounce(search, 300);

// 监听输入框的输入事件
const input = document.querySelector("#search-input");
input.addEventListener("input", function(event) {
  const keyword = event.target.value;
  debouncedSearch(keyword);
});

  在这个例子中，每当用户在搜索框中输入时，debouncedSearch函数会被调用。然而，由于使用了防抖函数，实际的搜索操作只会在用户停止输入 300 毫秒之后执行。如果用户在这段时间内继续输入，定时器会被清除并重新设置，从而延迟搜索操作的执行。

• 节流

// 创建节流函数
function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const currentTime = Date.now();
    if (currentTime - lastTime > interval) {
      func.apply(this, args);
      lastTime = currentTime;
    }
  };
}

// 模拟滚动处理函数
function handleScroll() {
  // 执行滚动处理操作
  console.log("Handling scroll event");
}

// 使用节流函数包装滚动处理函数
const throttledScroll = throttle(handleScroll, 300);

// 监听页面滚动事件
window.addEventListener("scroll", throttledScroll);

  在这个例子中，当用户滚动页面时，throttledScroll函数会被调用。然而，由于使用了节流函数，实际的滚动处理操作只会每隔 300 毫秒执行一次。如果用户频繁地滚动页面，函数的执行会被限制在每个时间间隔内。