この記事では、JavaScript機能スロットリングの概念と使用について説明します。次のように、参照のために共有してください。
最近、私がWebページを作成していたとき、私は要件がありました。これは、ブラウザウィンドウが変更されたときにページ要素サイズを変更することでした。
<！doctype html> <html> <head> <title> throttle </title> </head> <body> <script type = "text/javascript"> n = 0; function resizeHandler（）{console.log（new date（）。getTime（））; console.log（++ n）; } window.onresize = resizeHandler; </script> </body> </html>関数は実装されていますが、ブラウザのウィンドウサイズを変更する方法をドラッグアンドドロップすると、コンソールを見ました
そうです、単純なドラッグアンドドロップにより、私のsezizeHandler（）メソッドは52回実行されましたが、これは私が望む効果ではありません。実際、私のresizeHandler（）メソッドのコードは非常に複雑であり、Ajaxを使用してリクエストをサーバーに送信します。一度にウィンドウサイズを単に変更する場合は、52回電話する必要があります。これは大したことです。
関数スロットリング
実際、私の当初の意図は、ウィンドウのサイズ変更後にページを調整することです。窓のサイズ変更イベントは、サイズ変更の終了後にトリガーされません。特定の頻度はわかりませんが、ウィンドウサイズが変更されないまで常に呼び出しています。実際、同様のメカニズムとムセモブは、短期間で繰り返し引き起こされます。
JavaScript Advanced Programmingでこの問題を特に扱う機能があります
function throttle（method、context）{cleartimeout（method.tid）; method.tid = setimeout（function（）{method.call（context）;}、500）;}原則は非常に単純です。タイマーを使用して、関数の実行を500ミリ秒単位で遅らせます。 500ミリ秒以内に関数が再び呼び出されると、最後の呼び出しが削除されます。今回は500ミリ秒後にコールが実行され、これが繰り返されます。このようにして、私のコードは今に変更できます
<script type = "text/javascript"> n = 0; function seizehandler（）{console.log（new date（）。gettime（））; console.log（++ n）;} function throttle（method、context）{cleartimeout（method.tid）; method.tid = setimeout（function（）{method.call（context）;}、500）;} window.onresize = function（）{throttle（resizehandler、window）;}; </script>ドラッグとドラッグを試してみてください、それは一度だけ実行されました
それをする別の方法
オンラインでの関数スロットリングソリューションもありますが、これを行います
関数スロットル（メソッド、遅延）{var timer = null; return function（）{var context = this、args = arguments; ClearTimeout（タイマー）; Timer = setimeout（function（）{method.apply（context、args）;}、delay）; }}同じ効果を呼び出してみてください
<script type = "text/javascript"> n = 0; function seizehandler（）{console.log（new date（）。gettime（））; console.log（++ n）;} function throttle（method、delay）{var timer = null; return function（）{var context = this、args = arguments; ClearTimeout（タイマー）; Timer = setimeout（function（）{method.apply（context、args）;}、delay）; }} window.onresize = throttle（resizehandler、500）; //関数ハンドルが返されるため、関数をラップする必要はありません</script>比較する
どちらの方法でもSettimeOutを使用します。違いは、2番目の方法によって追加された関数が実行時間を遅らせることです。これは、この関数を最初のソリューションで簡単に使用して、パラメーターを追加できます。
ただし、最初のオプションはTIDを保存する関数の変数として設定しますが、2番目のオプションは保存する閉鎖を作成します。私は個人的にはギャップが大きくないと思いますし、私は最初のものが好きで、それはシンプルで効率的です。
新しい需要
ある日、私はバイドゥのホームページでの入力の自動プロンプトと同じように、似たようなものを作りました。キーアップイベントをテキストにバインドしました。キーボードがポップアップするたびに自動的にプロンプトが表示されますが、頻繁にプロンプトを表示したくありません。だから私は上記の方法を使用しましたが、それは悲劇的でした。入力を停止するだけで、500ミリ秒がプロンプトされたのを待っていましたが、入力プロセス中にプロンプトはまったくありませんでした。私はコードを見て、それが真実ではないことを発見しました。ユーザーが盲目的に入力する限り、500ミリ秒以内にキーボードを押してください。プロンプト関数は継続的に遅延します。これは、私が停止したときにのみ促進されますが、それは意味がありません。
機能スロットリングに基づいて、固定時間に一度実行できますか？
小さな変更
オンラインで検索しましたが、2番目のライティング方法に基づいていくつかの変更を加えることができます（最初の方法は、関数の複数の変数を拡張するのに少し悪いです）。
関数スロットル（方法、遅延、持続時間）{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）; }}}このようにして、間隔の期間を決定します。設定時間を超えた場合、すぐに実行します。今すぐこの例を使用して、効果を試してください
window.onresize = throttle（resizehandler、100,200）;
頻繁な実行や最終実行がないことは事実です
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。