この記事はもともとリンクだった：https://cloud.tencent.com/developer/article/1356193
手ぶれ補正JSおよびスロットリングに入ります
導入0
最初の例を与えます：
入力ボックスで行われたアナログAJAX照会要求、防振およびスロットルの添加効果なし、本明細書に添付の完全な実行可能なコード：
< ！DOCTYPE HTML >
<HTML LANG = "EN" > <頭> <メタ文字コード= "UTF-8" > <タイトル>没有防抖< /タイトル> <スタイルタイプ= "テキスト/ cssの" > < /スタイル> <スクリプトタイプ= "テキスト/ javascriptの" >ウィンドウ。onload = 関数（）{ //模拟AJAX请求関数AJAX （コンテンツ）{コンソール。+コンテンツ）} inputNormalはせ=ドキュメント。getElementByIdを（'正常' ）。inputNormal 。addEventListener （'keyUpイベント' 、関数（E ）{ AJAX （E .TARGET .VALUE ）} ）} < / SCRIPT > < / HEAD > <BODY > <DIV > 1 没有防抖的输入：の<input type = 「テキスト「名前= 『ノーマル』 ID = 『』ノーマル< / DIV > < /ボディ> < / HTML >
効果：入力ボックスを入力し、それが「AJAXリクエスト」（ここではコンソールがある）をトリガします。
画像安定化しないとスロットルありません
短所：廃資源要求、画像の安定化を最適化するために添加し、それを絞ることができます。
この記事では、安定化が何であるかを説明しますと、そのアプリケーションシナリオ、および実装を絞るされています。画像安定化及びスロットルを対処するために作られている時間の短い期間に、トリガ機能の多くによって引き起こされるパフォーマンスの問題、このようなトリガ周波数、遅延、又はカトンの仮死現象に追いつくために過度の速度に起因するトリガ周波数応答として。しかし、彼らはビジネスのニーズに応えるには同じではありませんので、原則の実現は、以下の具体的な外観、同じではありません。
1.安定剤（デバウンス）
1.1画像安定化とは何ですか
これは、n秒で再度タイミングをトリガされた場合、コールバック関数は、イベントn秒で起動し、されています。
1.2アプリケーションのシナリオ
（1）ユーザは、連続的に省資源を要求し、有効リクエストの数を減らすことができ、最後のクエリAJAXリクエストを実行するためにのみ入力された後、入力ボックスに文字列を入力します。
（2）ウィンドウのサイズ変更を、スクロールイベント、常にブラウザウィンドウのサイズを調整すること、または一度だけトリガすることができ、画像の安定化をスクロールするときに、対応するイベントがトリガされます。
1.3を実現します
次のように画像安定化を最適化するために添加される上記列子または、完全なコードです。
< ！DOCTYPE HTML >
<HTML LANG = "EN" > <頭> <メタ文字コード= "UTF-8" > <タイトル>加入防抖< /タイトル> <スタイルタイプ= "テキスト/ cssの" > < /スタイル> <スクリプトタイプ= "テキスト/ javascriptの" >ウィンドウ。onload = 関数（）{ //模拟AJAX请求関数AJAX （コンテンツ）{コンソール。コンテンツ+ ）} 関数デバウンス（楽しい、ディレイ）{ リターン機能（引数）{ //の変数機能と範囲を取得LET =をこのLET _args =引数//イベントがトリガされるたびに、それは、その後、現在のtimeerがクリアされます呼び出しタイムアウトが上書きセットてclearTimeout （ファン.ID ）楽しい.ID = setTimeoutメソッド（関数（）{楽しい。呼び出し（つまり、_args ）} 、遅延）} } せinputDebounce =ドキュメント。getElementByIdを（'デバウンスは' ）debounceAjaxましょう= デバウンス（アヤックス、500 ）inputDebounce 。addEventListener （'keyUpイベント' 、関数（E ）{ debounceAjax （E .TARGET .VALUE ）} ）} < / SCRIPT > < / HEAD > <BODY > の<div > 2 加入防抖后的输入：の<input type = "テキスト」名前= 『デバウンス』 ID ="デバウンス" > < / DIV > < /ボディ> < / HTML >
コード説明：
1.各イベントがトリガされるタイミングを再タイムアウトコールを、現在のタイマがクリアされ、再設定してください。これは、解雇することはできませんイベントハンドラで、その結果、各高周波イベントがキャンセルされる前に一度と呼ばれるタイムアウトにつながります。
2.高周波イベントが停止しているときのみ、最後の時間は、イベントトリガは、遅延時間の後に実行するためにタイムアウトをコールします。
効果：
入力が連続して入力ボックスで、指定した時間間隔のために、もはや入力がない場合にのみ、要求を送信しない安定化、を加えた後、リクエストが送信されます。あなたが最初の入力を停止し、彼らは指定された間隔内に入力した場合は、再トリガタイミングでしょう。
画像安定化を追加
2.スロットル（スロットル）
スロットリングは何2.1
時間の指定された単位、この単位時間内に、唯一1つのトリガイベントコールバックの実行、イベントは一度だけ有効にすることができ、時間の単位で数回トリガされた場合。
2.2アプリケーションのシナリオ
（1）マウスは、連続的に唯一の時間単位で一度だけトリガ、（例えばクリックなど）イベントをトリガします。
（2）ページ無限ローディングシナリオでは、時間間隔で発行されたAJAXリクエスト回、かなりのページをスクロールする動作を停止するよりも、ページをスクロールすることをユーザに要求する場合、ユーザ要求データ。
（3）このようなスライドの底を自動的に判断するスロットルと、複数の負荷かどうかのように、圧延イベントを監視します。
2.3を実現します
次のようにまたはリエ以上ここを見て最適化するために、スロットル参加するには、完全なコードは次のようになります。
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>加入节流</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content) } function throttle(fun, delay) { let last, deferTimer return function (args) { let that = this; let _args = arguments; let now = +new Date(); if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fun.apply(that, _args); }, delay) } else { last = now; fun.apply(that, _args); } } } let throttleAjax = throttle(ajax, 1000) let inputThrottle = document.getElementById('throttle') inputThrottle.addEventListener('keyup', function (e) { throttleAjax(e.target.value) }) } </script> </head> <body> <div> 3.加入节流后的输入： <input type="text" name="throttle" id="throttle"> </div> </body> </html>
效果：实验可发现在持续输入时，会安装代码中的设定，每1秒执行一次ajax请求
加入节流
3. 小结
总结下防抖和节流的区别：
-- 效果：
函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
-- 原理：
画像安定化は、タイマー機能は、指定された時間遅延の後にトリガさを維持することですが、遅延時間内に、再び再タイミングをタイムアウトコールを再設定し、その後現在のタイマがクリアされますトリガと。その結果、唯一の最後の操作をトリガすることができます。
スロットルには時間が遅延するタイマーを使用して指定されていない場合、次のイベントは、トリガ機能に到達するために一定の時間かどうかを判定することにより、タイマーがリセットされています。
質問があれば、私を修正してください。