JSのデザインパターン - スロットルモードの実用化

実際に、私たちはしばしば迅速なクリックを繰り返し、我々は見たくないリクエストを送信するために、非常に多くの時間を多くの要求を送信する場合、一度、要求を行っ]をクリックし、そのようなフォームを送信するボタンをクリックするなどのビジネスシナリオを、遭遇しますA。別の例は、私たちが文字を入力するたびに、その後スロットルモードが採用され、同様の問題を解決するために......リクエストが送信されます、検索するためのインタフェースが表示されます私たちのタイピング入力ボックスです。

//核となるアイデアは、プログラム実行の遅延、タイマーモードを作成するスロットル
	Varのスロットル=関数F（）{ 
		; arguments.slice = Array.prototype.slice 
		VARのFn、のparams = []; 
		//最初の場合ブール型パラメータは、最初のクリアタイマーを表すパラメータである
		（typeof演算の引数[0] ===「ブール」）IF { 
			//第2のパラメータは関数であり
			、FN =引数[1]; 
			//タイマーハンドラ関数現在、タイマがクリアされる
			のFn .__てclearTimeout &&（FN __throttleID。）をthrottleID、
			タイマ機能の//遅延動作が実行される
		}他の{ 
			Fnが引数[0] =; 
			paramsが= arguments.slice（1）、
			F（trueに、FN） ; 
			//バインドハンドラ関数は関数で
			Fnは= .__ throttleIDのsetTimeout（関数（）{ 
				//機能を実行する
				。fn.applyはヌル、paramsは（）
			、500}）
		} 
	}

　　さんが開いて、それを呼び出すようにしてみましょう

<！DOCTYPE HTML> 
<HTML> 
	<HEAD> 
		<メタ文字コード= "UTF-8"> 
		<タイトル> </ TITLE> 
	</ HEAD> 
	<BODY> 
		の<input type = "text" ID = "inputDom" /> 
	< / BODY> 
</ HTML> 

ます。<script type = "text / javascriptの"> 

    
	VAR内容=のdocument.getElementById（ 'inputDom'）; 

	機能プレス（）{ 
		にconsole.log（ "开始输入了"）。
	} 

	content.onkeyup =関数（）{ 
		スロットル（プレス、1,2,3）。
	} 

</ SCRIPT>

　　500ミリ秒以内に連続入力は、一度だけなされたとき、これは絞りの効果を達成することが分かります。

JSのデザインパターン - スロットルモードの実用化

おすすめ