JavaScriptアンチシェイクとスロットルの適用と実装方法の紹介（コード例）

この記事の内容は、JavaScript のアンチシェイクとスロットルの適用と実装方法 (コード例) の紹介です。必要な方は参考にしていただければ幸いです。あなたに助けてください。

最初に例を示します:

入力ボックスに入力した後、手ぶれ補正やスロットリング効果を追加せずに、Ajax クエリ リクエストの作成をシミュレートします。 完全な実行可能コードは次のとおりです。 ##

nbsp;html>


    <meta>
    <title>没有防抖</title>
    <style></style>
    <script>
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log(&#39;ajax request &#39; + content)
            }
            let inputNormal = document.getElementById(&#39;normal&#39;);

            inputNormal.addEventListener(&#39;keyup&#39;, function (e) {
                ajax(e.target.value)
            })
        }
    </script>



    <div>
        1.没有防抖的输入：
        <input>
    </div>

効果: 入力ボックスに 1 つを入力すると、「ajax リクエスト」がトリガーされます (これがコンソールです)。

手ぶれ補正とスロットリングがない

欠点: リクエスト リソースの無駄。最適化するために手ぶれ補正とスロットルを追加できます。それ。

この記事では、手ぶれ補正とスロットルの概要、適用シナリオ、実装方法について紹介します。手ぶれ補正とスロットルはどちらも、短期間に多数の機能をトリガーすることによって発生する

パフォーマンスの問題を解決することを目的としています。 たとえば、トリガー周波数が高すぎる場合、応答速度が低下します。トリガー周波数に追いつけない、フリーズする、またはフリーズする。ただし、扱うビジネス ニーズが異なるため、実装原則も異なります。以下で詳しく見てみましょう。 1. デバウンス

1.1 デバウンスとは

イベントがトリガーされてから n 秒以内にコールバック関数を実行します。この n 秒間、時間が再開されます。

1.2 アプリケーション シナリオ

(1) ユーザーが入力ボックスに文字列を継続的に入力した後、最後のクエリ ajax リクエストは入力が完了した後でのみ実行されます。リクエストの回数を減らし、リクエスト リソースを節約します。

(2) ブラウザ ウィンドウのサイズを常に調整したりスクロールしたりすると、ウィンドウのサイズ変更イベントとスクロール イベントがトリガーされ、手ぶれ補正が行われます。

1.3 実装

は上記と同じですが、最適化するためにアンチシェイクが追加されています。

nbsp;html>


    <meta>
    <title>加入防抖</title>
    <style></style>
    <script>
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log(&#39;ajax request &#39; + content)
            }
            function debounce(fun, delay) {
                return function (args) {
                    //获取函数的作用域和变量
                    let that = this
                    let _args = args
                    //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用
                    clearTimeout(fun.id)
                    fun.id = setTimeout(function () {
                        fun.call(that, _args)
                    }, delay)
                }
            }
            let inputDebounce = document.getElementById(&#39;debounce&#39;)
            let debounceAjax = debounce(ajax, 500)
            inputDebounce.addEventListener(&#39;keyup&#39;, function (e) {
                debounceAjax(e.target.value)
            })
        }
    </script>



    <div>
        2.加入防抖后的输入：
        <input>
    </div>

コードの説明:

1. イベントがトリガーされるたびに、現在のタイマーがクリアされ、タイムアウト呼び出しがリセットされます。つまり、タイミングが再設定されます。これにより、各高頻度イベントが前のタイムアウト呼び出しをキャンセルし、イベント ハンドラーがトリガーされなくなります。

#2. 高頻度イベントが停止した場合にのみ、最後のイベントによってトリガーされたタイムアウト呼び出しが可能になります。遅延して実行;

効果:

手ぶれ補正を追加した後、入力ボックスに入力を続けると、それ以上の要求が送信されなくなります。指定された時間間隔内に入力すると、リクエストが送信されます。一度入力を停止し、指定した間隔内に再度入力すると、タイミングが再トリガーされます。

手ぶれ補正の追加

2.スロットル

2.1 スロットリングとは単位時間を指定します。この単位時間内で、イベントをトリガーするコールバック関数は 1 回だけ実行できます。同じ単位時間内にイベントが複数回トリガーされた場合、有効になるのは 1 回だけです。

2.2 アプリケーション シナリオ

(1) マウスはイベント (クリックなど) を継続的にトリガーし、単位時間あたり 1 回だけトリガーします。ページ 無限読み込みシナリオでは、ユーザーはページのスクロールを停止したときにのみデータをリクエストするのではなく、ページのスクロール中に時々 ajax リクエストを送信する必要があります。

(3) スクロールを監視します。イベント、たとえば、自動的にさらに読み込むために一番下にスライドするかどうか、スロットルを使用して判断します。

2.3 実装

# これは依然として上記の例ですが、ここにスロットルを追加して最適化します。完全なコードは次のとおりです:

nbsp;html>



    <meta>
    <title>加入节流</title>
    <style></style>
    <script>
        window.onload = function () {
            //模拟ajax请求
            function ajax(content) {
                console.log(&#39;ajax request &#39; + 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(&#39;throttle&#39;)
            inputThrottle.addEventListener(&#39;keyup&#39;, function (e) {
                throttleAjax(e.target.value)
            })
        }
    </script>


    <div>
        3.加入节流后的输入：
        <input>
    </div>

効果: 実験により、継続的に入力すると、コード内の設定がインストールされ、1 秒ごとに ajax リクエストが実行されることがわかりました。

スロットリングの追加

3. 概要

手ぶれ補正とスロットルの違いを要約します:

-- 効果:

関数アンチシェイクは一定期間内で実行されます。関数スロットリングは一定間隔で実行されます。イベントがどれほど頻繁にトリガーされても、実際のイベント処理関数が実行されることが保証されます。指定された時間内に 1 回。

-- 原則:

アンチシェイクはタイマーを維持し、遅延時間の経過後に機能がトリガーされるように規定します。ただし、遅延時間内に再度トリガーされた場合は、現在のタイマーが使用されます。がクリアされ、タイムアウトがリセットされます。つまり、リタイミングが行われます。このようにして、最後の操作のみをトリガーできます。

スロットルは、特定の時間に達したかどうかを判断してトリガーされる機能で、指定した時間に達していない場合はタイマーを使用して遅延し、次のイベントでタイマーがリセットされます。

以上がJavaScriptアンチシェイクとスロットルの適用と実装方法の紹介（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。