前端实现防抖和节流（简版&完备）()-其他

发表于： 3月 16, 2023 3月 16, 2023
分类：其他
标签：其他

前端实现防抖和节流（简版&完备）()

前言

防抖函数是一种常用的优化方法，可以避免在短时间内频繁触发某个函数而导致性能问题。

作用是在一定时间内，如果重复触发同一个函数，只执行最后一次，以减少函数执行次数，节省性能。

简易版实现：

以下是一个简单的防抖函数实现：

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

这个防抖函数接受两个参数，第一个参数是要执行的函数，第二个参数是延迟时间。函数内部创建了一个计时器，每次函数被调用时，先清除之前的计时器，并重新设置一个新的计时器，在延迟时间后执行函数。如果在延迟时间内再次调用函数，会清除之前的计时器，并重新设置一个新的计时器，直到延迟时间内没有新的调用，才会执行函数。

完备版实现：

下面是一个使用JavaScript实现的功能完备的防抖函数：

function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    const last = Date.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;\n      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = Date.now();
    const callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

这个防抖函数接收三个参数：

func：要防抖的函数
wait：等待时间，单位为毫秒
immediate：是否立即执行

如果设置为，则函数会在第一次触发时立即执行，不会等待时间。如果设置为或不传入该参数，则函数会在最后一次触发后等待时间再执行。

immediate

true

wait

false

wait

在函数内部，使用闭包保存了、、、和这些变量。在每次函数被触发时，都会更新这些变量的值，并根据和的状态来决定是否调用。如果存在，则表示函数已经被触发过了，需要等待时间再执行；如果不存在，则表示函数尚未被触发，需要创建一个新的并设置等待时间；如果为，还需要在第一次触发时立即执行。

timeout

args

context

timestamp

result

immediate

timeout

func

timeout

wait

timeout

immediate

true

使用这个防抖函数非常简单，只需要把要防抖的函数和等待时间传入即可。例如：

const debouncedFn = debounce(myFunction, 500);

这样就创建了一个防抖的函数，它会在被触发后等待 500 毫秒再执行。如果需要立即执行，可以设置：

debouncedFn

myFunction

immediate: true

const debouncedFn = debounce(myFunction, 500, true);

这样就会在第一次触发时立即执行，然后在接下来的 500 毫秒内不会再次执行，直到最后一次触发后再执行一次。

myFunction

————————

前言