防抖和节流及多种实现方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了防抖和节流及多种实现方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当用户在网页中进行操作时，如点击、滚动、输入等，往往会频繁地触发事件。如果每个事件都立即执行相应的函数，可能会导致性能问题和用户体验不佳，因为这些函数可能需要执行复杂的操作，如计算、网络请求等。

为了优化这种情况，我们可以使用防抖和节流来限制函数的调用次数，从而提高性能和用户体验。

文章来源地址https://www.toymoban.com/news/detail-423492.html

防抖

防抖是指在一定的时间间隔内，将多次触发的事件合并成一次执行。

防抖的实现思路是：每次事件被触发时，设置一个计时器，在指定的时间间隔内，如果该事件被再次触发，则清除计时器并重新开始计时，直到指定的时间间隔内没有事件触发为止，然后调用函数。

防抖可以用于处理一些频繁触发的事件，如窗口大小改变、输入框输入等。以下是一个简单的防抖函数实现：

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

这个函数接收两个参数： fn 是要防抖的函数， delay 是防抖时间间隔。返回一个新的函数，在防抖时间间隔内，重复调用这个新函数不会立即触发原函数，只有等时间间隔过去之后才会触发。

节流

节流是指在一定的时间间隔内，函数只被调用一次。如果在这个时间间隔内触发了多次事件，只有第一次会调用函数，其余的会被忽略。

节流的实现思路是：每次事件被触发时，如果函数没有在指定的时间间隔内被调用过，则调用函数并设置一个计时器，在指定的时间间隔内不再触发事件。如果在指定的时间间隔内再次触发了事件，则不调用函数，直到指定的时间间隔过去，重新开始调用函数。

节流可以用于处理一些频繁触发的事件，如页面滚动、鼠标移动等。以下是一个简单的节流函数实现：

function throttle(fn, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

这个函数接收两个参数： fn 是要节流的函数， delay 是节流时间间隔。返回一个新的函数，在指定的时间间隔内，只能调用一次原函数。

防抖和节流的实现方式可以有多种，具体实现应该根据实际场景进行调整。下面介绍一些常见的实现方式。

立即执行版和非立即执行版

防抖和节流的实现中，可以根据需求选择立即执行版或非立即执行版。

立即执行版是指在每次触发事件时，立即执行一次函数，然后在指定的时间间隔内不再执行。这种方式适合处理一些需要立即响应的事件，如按钮点击等。

以下是立即执行版的防抖函数实现：

function debounce(fn, delay, immediate) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    if (immediate && !timer) {
      fn.apply(context, args);
    }
    clearTimeout(timer);
    timer = setTimeout(function() {
      if (!immediate) {
        fn.apply(context, args);
      }
      timer = null;
    }, delay);
  };
}

这个函数增加了一个参数 immediate ，用来指定是否立即执行函数。如果设置为 true ，则在触发事件时立即执行函数；否则等待指定的时间间隔后再执行。

非立即执行版是指在事件停止触发指定时间后才执行一次函数。这种方式适合处理一些连续触发的事件，如输入框输入等。

以下是非立即执行版的防抖函数实现：

function debounce(fn, delay, immediate) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    if (immediate && !timer) {
      fn.apply(context, args);
    }
    timer = setTimeout(function() {
      if (!immediate) {
        fn.apply(context, args);
      }
      timer = null;
    }, delay);
  };
}

这个函数与立即执行版的实现相似，区别在于多了一个 if (timer) { clearTimeout(timer); } 判断。如果计时器已经存在，则在重新设置计时器之前先清除之前的计时器。

时间戳版和定时器版

防抖和节流的实现中，可以根据需求选择时间戳版或定时器版。

时间戳版是指在事件触发后，记录下当前的时间戳，并在下次事件触发时再次记录时间戳。在指定的时间间隔内，如果事件再次触发，则更新时间戳。如果时间戳与当前时间的差值超过了指定的时间间隔，则执行函数。这种方式适合处理一些需要立即响应的事件，如按钮点击等。

以下是时间戳版的节流函数实现：

function throttle(fn, delay) {
  let last = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = +new Date();
    if (now - last > delay) {
      fn.apply(context, args);
      last = now;
    }
  };

这个函数中， last 记录上次执行函数的时间戳，每次事件触发时，计算当前时间戳与上次执行函数的时间戳的差值，如果超过指定的时间间隔，则执行函数并更新 last 。

定时器版是指在事件触发后，设置一个定时器，在指定的时间间隔内不再触发事件。如果在指定的时间间隔内再次触发了事件，则不执行函数，直到定时器到期后再次执行函数。这种方式适合处理一些连续触发的事件，如页面滚动、鼠标移动等。

以下是定时器版的节流函数实现：

function throttle(fn, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}