JavaScript関数のスロットルの詳細説明とメソッド例の詳細説明

この記事では主に JavaScript 関数のスロットルの詳細な説明と、例を含む関連情報を紹介します。必要な方は、

JavaScript 関数のスロットルの詳細な説明を参照してください。インターフェースのレンダリングとページ上の JavaScript コードの実行を同時に処理します (簡単に説明すると、ブラウザーまたは JavaScript 実行環境は、Ajax 非同期コールバック、ネイティブ通信など、シングルスレッドではありません)ハイブリッド フレームワークでは、イベント キュー、CSS 実行スレッドなどはすべてマルチスレッド Thread 環境ですが、ES6 では一部の非同期状況を軽減するために Promise クラスが導入されました。したがって、JavaScript コードが大量の計算を必要とするメソッドを実行すると、UI スレッドがブロックされ、これによりユーザーの応答がフリーズする可能性があり、深刻な場合には、ブラウザーはページが応答しないかどうか、およびページを強制的に応答するかどうかを尋ねるプロンプトを表示することがあります。近い。たとえば、Web ページのページ スクロール イベント、モバイル デバイスのスライドやズーム イベントなどです。重大なパフォーマンスの問題がない場合でも、パフォーマンスの最適化

の観点から、短期間に複数回トリガーされる大規模な処理時間をオフロードする必要があります。

UI スレッドが長すぎるコードを実行するのを効果的に防ぐ方法は、すべてのユーザー インタラクション アプリケーションが考慮する必要がある問題です。同じ問題がクライアントにもあります
Android

UI メイン スレッドを使用してサブスレッドを開くことができます。分散計算。同様に、js でも webWorker を導入することで計算を分散できますが、js には関数スロットリングという、よりシンプルで効果的な方法があります。

関数スロットルを使用するための中心的なテクニックは、タイマーのセグメント化された計算を使用することです。具体的な実現方法としては大きく分けて2つの考え方があります。
・方法1

1. この実装方法のアイデアは理解しやすいです。50ミリ秒などの間隔を設定し、この時間に基づいてタイマーを設定します。セカンダリ トリガー イベント間の間隔が 50 ミリ秒未満の場合は、このタイマーをクリアして新しいタイマーを設定し、イベントがトリガーされてから 50 ミリ秒以内にトリガーが繰り返されなくなるまでこれを繰り返します。コードは次のとおりです。

function debounce(method){ 
  clearTimeout(method.timer); 
  method.timer=setTimeout(function(){ 
   method(); 
  },50); 
}

この設計アプローチには問題があります。複数回トリガーされるべきイベントが、結局 1 回しか発生しない可能性があります。具体的には、段階的なスクロール イベントの場合、ユーザーのスクロールが速すぎる場合、またはプログラムによって設定された機能のスロットル間隔が長すぎる場合、最後のスクロール イベントが突然のジャンプ イベントとして表示され、中間のプロセスがスロットリングによって中断されます。 。この例は少し誇張されていますが、この方法を使用して調整すると、最終的にプログラムが調整されていない場合よりも「より唐突に」感じられるようになり、ユーザー エクスペリエンスが非常に悪くなります。この欠点を補う設計上のアイデアがあります。

・方法2

2. 2番目の実装方法のアイデアは最初の実装方法とは少し異なります。50ミリ秒などの間隔時間を設定し、この時間を基準としてイベントを着実に分離します。トリガー状況、つまり、複数のイベントが 100 ミリ秒以内に連続してトリガーされた場合、それらは 50 ミリ秒の安定した間隔でのみ実行されます。コードは次のとおりです:

var oldTime=new Date().getTime(); 
var delay=50; 
function throttle1(method){ 
  var curTime=new Date().getTime(); 
  if(curTime-oldTime>=delay){ 
   oldTime=curTime; 
   method(); 
  } 
}

最初のメソッドと比較して、2 番目のメソッドは最初のメソッドよりも多くの回数実行される可能性があります (バックグラウンドへのリクエスト、つまりトラフィックの増加を意味する場合もあります) が、これは非常に良い解決策です。中間プロセスをクリアする最初の方法の欠点を修正します。したがって、特定のシナリオでは、状況に応じて使用する方法を決定する必要があります。

メソッド 2 については、同じ関数を記述する別の方法を提供します。

var timer=undefined,delay=50; 
function throttle2(method){ 
  if(timer){ 
    return ; 
  } 
  method(); 
  timer=setTimeout(function(){ 
    timer=undefined; 
  },delay); 
}

最後に、スロットルとデバウンスという 2 つのメソッド名が表示されます。これは「」と翻訳できます。コントロール、スタック」、およびデバウンスは「アンチバウンス」と翻訳できます。 「JavaScript 高度なプログラミング」では、著者は方法 1 を紹介し、著者は関数名「throttle」を使用しました。 『サードパーティ JavaScript プログラミング』では、メソッド 1 とメソッド 2 の両方が登場し、著者はメソッド 1 を「デバウンス」、メソッド 2 を「スロットル」と名付けました。 2 つの方法を同時に紹介する場合、中国の一部の記事では方法 1 を「スロットル」、方法 2 を「デバウンス」と誤って命名していますが、これは英語の観点からすると非常に無責任です。したがって、ここで物事を正しくします。方法 1 は「アンチバウンス」として理解でき、「デバウンス」という名前にする必要があります。方法 2 は「機能スロットリング」として理解でき、「スロットル」という名前を付ける必要があります。

以上がJavaScript関数のスロットルの詳細説明とメソッド例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。