外部ライブラリを使用せずに JavaScript で単純なスロットル関数を実装するにはどうすればよいですか?

外部ライブラリを使用しない JavaScript での単純なスロットル

はじめに

JavaScript では、スロットリングはレートを制限するために使用される手法です関数を実行できる場所。

カスタム スロットル関数

提供されているカスタム スロットル関数は機能しますが、スロットル時間が完了した後にもう一度関数を起動するという欠陥があります。洗練されたバージョンは次のとおりです。

<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 中国語 Web サイトの他の関連記事を参照してください。