函数防抖与节流总结——揭秘防抖和节流的本质

2023-11-19 04:22:45

函数防抖与节流简介

在现代前端开发中，函数防抖和函数节流是两个常用的优化手段，它们可以有效提升网页性能，减少代码执行次数，优化用户体验。

函数防抖

函数防抖是一种优化高频率执行JS代码的手段，它可以让被调用的函数在一次连续的高频操作过程中只被调用一次。例如，在谷歌引擎上输入自己想要搜索的内容时，当输入框中字符变化时，搜索建议功能就会自动根据已输入的字符进行提示。如果使用传统的JS代码来实现这个功能，那么每次用户输入一个字符，搜索建议功能都会被调用一次。这将导致大量的函数调用，从而降低网页性能。

为了解决这个问题，我们可以使用函数防抖。函数防抖的原理是，在高频操作过程中，每次函数被调用时，都会重新计时器。如果在计时器到期之前，函数再次被调用，那么计时器就会被重置。这样一来，函数只会被调用一次。

函数节流

函数节流与函数防抖类似，也是一种优化高频率执行JS代码的手段。但是，函数节流的原理与函数防抖不同。函数节流的原理是，在高频操作过程中，函数在一定时间间隔内只会被调用一次。例如，在一个滚动事件中，我们可以使用函数节流来确保滚动事件在一定时间间隔内只会被触发一次。这可以有效减少函数的调用次数，从而提高网页性能。

函数防抖与节流的异同

函数防抖和函数节流都是优化高频率执行JS代码的手段，但它们之间存在一些差异。

触发时机： 函数防抖只会在高频操作停止后才触发函数调用，而函数节流会在高频操作执行期间按照一定的时间间隔触发函数调用。
执行次数： 函数防抖只会在高频操作停止后执行函数一次，而函数节流会在高频操作执行期间按照一定的时间间隔执行函数多次。
使用场景： 函数防抖适用于那些不需要频繁触发的函数，例如搜索建议功能。函数节流适用于那些需要在一定时间间隔内触发的函数，例如滚动事件。

函数防抖与节流的实现

函数防抖和函数节流的实现并不复杂，我们可以使用JavaScript的原生方法来实现它们。

函数防抖的实现

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

函数节流的实现

function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    let context = this;
    let args = arguments;
    let now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(context, args);
      lastTime = now;
    }
  };
}