## スロットル時間が経過した後に JavaScript スロットル関数が再度起動されることがあるのはなぜですか?

Linda Hamilton
リリース: 2024-10-30 03:27:28
オリジナル
571 人が閲覧しました

##  Why Do JavaScript Throttle Functions Sometimes Fire Once More After the Throttle Time Has Elapsed?

JavaScript スロットル関数

概要

JavaScript スロットルは、関数が頻繁に実行されすぎるのを防ぐことができる便利な手法です。これは、過剰な関数呼び出しがパフォーマンスの問題や意図しない影響を引き起こす可能性がある状況で特に有益です。

カスタム スロットル関数

次の JavaScript コードは、再利用可能な「スロットル」関数を提供します。

<code class="javascript">function throttle(fn, threshhold, scope) {
  threshhold || (threshhold = 250);
  var last,
      deferTimer;
  return function () {
    var context = scope || this;

    var now = +new Date,
        args = arguments;
    if (last &amp;&amp; now < last + threshhold) {
      // hold on to it
      clearTimeout(deferTimer);
      deferTimer = setTimeout(function () {
        last = now;
        fn.apply(context, args);
      }, threshhold);
    } else {
      last = now;
      fn.apply(context, args);
    }
  };
}
ログイン後にコピー

改訂されたスロットリング関数

しかし、提供された関数には顕著な欠点があります。スロットル時間が経過すると、関数がもう一度起動されます。これにより、特定のシナリオで望ましくない動作が発生する可能性があります。

調整関数の改訂版は、underscore.js や lodash などのライブラリから入手できます。このバージョンでは、スロットル時間の後に関数が起動される問題に効果的に対処しています。

<code class="javascript">function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : Date.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = Date.now();
    if (!previous &amp;&amp; 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 = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout &amp;&amp; options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};</code>
ログイン後にコピー

簡略化されたスロットル関数

スロットル関数の簡略化された構成不可能なバージョンが以下に提供されています。

<code class="javascript">function throttle (callback, limit) {
    var waiting = false;                      // Initially, we're not waiting
    return function () {                      // We return a throttled function
        if (!waiting) {                       // If we're not waiting
            callback.apply(this, arguments);  // Execute users function
            waiting = true;                   // Prevent future invocations
            setTimeout(function () {          // After a period of time
                waiting = false;              // And allow future invocations
            }, limit);
        }
    }
}</code>
ログイン後にコピー

この関数を使用すると、「limit」パラメーターを調整することで関数の実行頻度を制御できます。

以上が## スロットル時間が経過した後に JavaScript スロットル関数が再度起動されることがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!