JavaScript での単純なスロットル
JavaScript には、lodash や underscore など、関数をスロットルするためのさまざまなツールが用意されています。ただし、これらのライブラリが過剰になる可能性がある場合には、カスタム スロットルの実装が望ましいです。
既存のスロットル関数と課題
提供されたスロットル関数は機能しますが、問題を提示します。スロットル期間が終了すると、最後にもう一度関数が実行されます。これにより、関数を複数回起動すべきではないシナリオで望ましくない動作が発生する可能性があります。
改善されたスロットル関数
この問題に対処するには、次の拡張されたスロットル関数を検討してください。スロットル期間後の最終実行を排除します:
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 && 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 && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; };
この更新された関数は、前縁および後縁トリガー用のオプションのパラメーターを備えた構成可能なスロットル メカニズムを提供します。
簡素化されたスロットル関数
カスタマイズ性が必要ない場合、より単純なスロットル関数は次のとおりです。
function throttle (callback, limit) { var waiting = false; return function () { if (!waiting) { callback.apply(this, arguments); waiting = true; setTimeout(function () { waiting = false; }, limit); } } }
この構成不可能な関数は、複雑なオプションを必要とせずに、ターゲット関数を指定された時間間隔にスロットルします。 .
以上が**シンプルな JavaScript スロットル関数により、スロットル期間後の最終実行が削除されるのはなぜですか?**の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。