JavaScript中的延迟防抖和立即执行防抖

标题：JavaScript中的延迟防抖和立即执行防抖

简介： 在JavaScript开发中，防抖函数是一种常用的技术，用于控制事件的触发频率。它可以限制事件处理函数的执行次数，从而提高性能和用户体验。本文将介绍延迟防抖和立即执行防抖两种常见的防抖模式，并提供相应的代码示例和用法说明。

延迟防抖

延迟防抖是一种防抖模式，在触发事件后，会延迟一定时间再执行处理函数。如果在延迟时间内再次触发事件，延迟防抖会重新计时，直到延迟时间过去才会执行处理函数。

以下是一个实现延迟防抖的JavaScript代码示例：

function debounce(func, delay) {
  let timeoutId;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timeoutId);

    timeoutId = setTimeout(function() {
      timeoutId = null
      func.apply(context, args);
    }, delay);
  };
}

使用示例：

function handleInput() {
  console.log('Input event');
}

const delayedDebounce = debounce(handleInput, 300);

document.querySelector('input').addEventListener('input', delayedDebounce);

在上述示例中，debounce函数接受一个处理函数func和延迟时间delay作为参数，并返回一个新的函数。该新函数会在触发事件后延迟指定时间delay后执行处理函数func。如果在延迟时间内再次触发事件，定时器会被清除并重新计时。

立即执行防抖

立即执行防抖是另一种常见的防抖模式，在触发事件后立即执行一次处理函数，然后在指定的时间间隔内忽略后续的触发。只有在指定时间间隔过去后再次触发事件，处理函数才会被执行。

以下是一个实现立即执行防抖的JavaScript代码示例：

function debounceImmediate(func, delay) {
  let timeoutId;
  let immediateExecuted = false;

  return function() {
    const context = this;
    const args = arguments;

    if (!immediateExecuted) {
      func.apply(context, args);
      immediateExecuted = true;
    }

    clearTimeout(timeoutId);

    timeoutId = setTimeout(function() {
      immediateExecuted = false;
    }, delay);
  };
}

使用示例：

function handleScroll() {
  console.log('Scroll event');
}

const immediateDebounce = debounceImmediate(handleScroll, 200);

window.addEventListener('scroll', immediateDebounce);

在上述示例中，debounceImmediate函数接受一个处理函数func和一个延迟时间delay作为参数，并返回一个新的函数。该新函数会在触发事件后立即执行一次处理函数func，然后在指定的延迟时间内忽略后续的触发。当延迟时间过去后，再次触发事件时，处理函数会被执行。

延迟防抖和立即执行防抖可以根据具体需求来选择使用。延迟防抖适用于需要等待一段时间后执行处理函数的场景，例如输入框的输入事件，可以在用户停止输入一段时间后执行搜索操作。而立即执行防抖适用于需要立即执行一次处理函数的场景，例如滚动事件，可以在滚动开始时立即执行一次操作，然后在指定时间内忽略后续的滚动。

需要注意的是，在使用防抖函数时，可以根据具体情况进行参数的调整。延迟时间决定了触发间隔，可以根据事件的特性和响应要求进行调整。同时，可以根据需要将防抖函数应用于不同的事件和处理函数，以满足各种场景的需求。

总结： 延迟防抖和立即执行防抖是JavaScript中常见的防抖模式。延迟防抖延迟一定时间后执行处理函数，适用于需要等待一段时间后触发的场景；立即执行防抖在触发事件后立即执行一次处理函数，然后在指定时间内忽略后续的触发。根据具体需求和事件特性，可以选择合适的防抖模式，并调整延迟时间以满足应用要求。防抖函数可以提高性能和用户体验，减少不必要的重复操作，是JavaScript开发中常用的技术之一。

最后在提供一个将两种模式结合在一起的方法示例：

// 如果immediate为true，就是立即执行防抖,反之就是延迟防抖
function debounce(fn, delay, immediate) {
  let timeout
  return function () {
    let _self = this
    let args = arguments
    if (immediate && !timeout) {
      fn.apply(_self, args)
      leadingExecuted = true
    }
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      timeout = null
      if (!immediate) fn.apply(_self, args)
    }, delay)
  }
}