如何在沒有外部函式庫的情況下用 JavaScript 實作簡單的節流功能？

不需要外部庫的JavaScript 中的簡單節流

簡介

在Java 中，節流是一種用於限制速率的技術可以執行函數的位置。

自訂節流函數

提供的自訂節流函數雖然有效，但有一個缺陷，即它會在節流時間完成後再次觸發該函數。這是一個改進的版本：

<code class="js">function throttle(fn, wait, options) {
  if (!options) options = {};
  var context,
    args,
    result,
    timeout = null,
    previous = 0;
  var later = function () {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = fn.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function () {
    var now = Date.now();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = fn.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
}</code>

此版本透過實現前緣和後緣行為的可自訂選項，解決了節流週期後多次觸發的問題。

簡化的節流功能

如果您不需要進階選項，可以使用簡化的、不可設定的節流功能：

<code class="js">function throttle(callback, limit) {
  var waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        waiting = false;
      }, limit);
    }
  };
}</code>

以上是如何在沒有外部函式庫的情況下用 JavaScript 實作簡單的節流功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！