ブラウザの一部の計算と処理は、他の計算よりもはるかに高価です。たとえば、DOM操作には、非DOM相互作用よりも多くのメモリとCPU時間が必要です。連続してDOM関連の操作が多すぎると、ブラウザがハングアップし、時にはクラッシュすることもあります。これは、特にIEでOnresizeイベントハンドラーを使用する場合に簡単に発生します。ブラウザがサイズ変更されると、イベントは継続的にトリガーされます。 Onresizeイベントハンドラー内でDOM操作を実行しようとすると、その高頻度の変更によりブラウザがクラッシュする可能性があります。
関数スロットリングの背後にある基本的なアイデアは、特定のコードを中断せずに繰り返し実行できないということです。関数が最初に呼び出されると、タイマーが作成され、指定された時間間隔の後にコードが実行されます。関数が2番目のタイマーと呼ばれると、以前のタイマーをクリアし、別のタイマーを設定します。以前のタイマーが実行された場合、この操作には意味がありません。ただし、以前のタイマーが実行されていない場合、実際には新しいタイマーに置き換えられます。目的は、機能を実行するリクエストがしばらくの間停止された後にのみ実行することです。
function throttle（method、context）{cleartimeout（method.tid）; method.tid = setimeout（function（）{method.call（context）;}、100）; }アプリケーションの例：
高さを常にその幅に等しく保つ必要がある<div/>要素があると仮定すると、次のようにエンコードできます。
function resizediv（）{var div = document.getElementById（ "mydiv"）; div.style.height = div.offsetwidth + "px"; } window.onresize = function（）{throttle（resizediv）; }ここでは、sezize関数がResizedivと呼ばれる個別の関数に配置され、Onresizeイベントハンドラーはresizediv（）を直接呼び出すのではなく、Resized関数を通過し、sholottle（）を通過します。ほとんどの場合、ユーザーは変更を感じることができませんが、ブラウザに保存された計算は非常に大きい場合があります。
以下は、他のネチズンからの追加です
今日、私たちは主に毎日の仕事に必要な機能スロットルについて書きます。一部の友人は、機能のスロットリングに気付いていないかもしれません。実際、作業では、多くのシナリオでstrottp：//www.sub.comが必要です。最も一般的なのは、画面のサイズ変更と、イベントまたはスクロールイベントです。以前に書いた記事を読んだことがあるかどうかはわかりません！ jQueryは、ページScrollbarとTouchMoveのスライド方向を決定します。これらの例を使用すると、ページを塗り直す必要がないため、ページがtouchMoveまたはスクロールをトリガーし続けることがわかります。そのため、JavaScript関数を使用してここでスロットルしていません。ただし、Window.Onresizeを使用すると、サイズ変更イベントは継続的にトリガーされます！これは、ページの補償問題に関連しています。したがって、ウィンドウをサイズ変更するときは、関数スロットリングを使用することをお勧めします！
JavaScript関数のスロットリングの紹介
あなたが私に大きなテキストに圧倒されていると感じるなら、それは問題ではありません。ここで機能を調べる機能を説明するための簡単な例を挙げます！たとえば、使用する場合
$（window）.resize（function（）{console.log（ "haoroomsウィンドウサイズ"）;}）あなたが見つけるでしょう：
ここで何度も出力されます。窓を狭めるだけで、トリガーを続けます！
このようにして、Divがよく使用される場合、ページは継続的に再描画されます。比較的低いバージョンでIEに遭遇した場合、ブラウザがクラッシュする可能性があります！これを回避するために、関数スロットリング方法を使用できます。基本的なアイデアは、関数が初めて呼び出されると、タイマーを作成し、指定された時間間隔の後にコードを実行し、2回目の呼び出された場合、以前のタイマーを明確に理解してリセットします。以前のタイマーが実行されている場合、この操作は意図的ではありません。タイマーが実行されていない場合、新しいタイマーに置き換えられます。目的は、一定期間停止した後に関数を実行することです。
オブジェクトメソッドは次のように記述できます。
var haoroomstest = {timeoutid：null、performprocessing：function（）{console.log（ "resize"）; }、process：function（）{cleartimeout（this.timeoutid）; var that = this; this.timeoutid = setimeout（function（）{that.performprocessing（）;}、500）}}}この後、私たちは以下を使用します。
$（window）.resize（function（）{haoomstest.process（）;}）
これにより、リクエストが削減され、DOMの再描画を減らし、スロットリングの目的を達成します！
他の機能スロットリング
オブジェクトの使用方法に加えて、他の方法と機能スロットリングの方法もオンラインおよび情報に紹介されます。以下に簡単に紹介します！
関数方法1
function throttle（method、context）{cleartimeout（method.tid）; method.tid = setimeout（function（）{method.call（context）;}、100）; }使用します
function resizediv（）{console.log（ "harooms"）} $（window）.resize（function（）{throttle（resizediv）}）上記のオブジェクトと同じ効果！
関数法2
オンラインでお金を禁止するより人気のある方法もあるので、ここにそれについて書きます！
関数スロットル（メソッド、遅延）{var timer = null; return function（）{var context = this、args = arguments; ClearTimeout（タイマー）; Timer = setimeout（function（）{method.apply（context、args）;}、delay）; }}次に、これを書くことができます：
function resizediv（）{console.log（ "haorooms"）} window.onresize = throttle（resizediv、500）;新しい需要
ファジー検索インテリジェントアソシエーションプロンプトを実行すると、入力のキーアップイベントをバインドします。しかし、私はそれを頻繁にトリガーしたくないので、上記の方法を使用して問題が発生します。したがって、上記の関数は次のようにわずかに変更されます。
関数スロットル（方法、遅延、持続時間）{varタイマー= null、begin = new date（）; return function（）{var context = this、args = arguments、current = new date（）;; ClearTimeout（タイマー）; if（current-begin> = duration）{method.apply（context、args）; begin = current; } else {timer = setimeout（function（）{method.apply（context、args）;}、delay）; }}}このようにして、トリガーは以前ほど頻繁にはなりません！