JavaScript スロットリングとアンチシェイクに関する簡単な説明

スロットルと手ぶれ防止

背景: リソース、インターフェースなどを頻繁にリクエストすると、Dom 操作が頻繁に発生し、インターフェースの負荷が高まり、パフォーマンスが低下します。たとえば、検索するたびに突然 Enter キーを押したり、ネットワーク接続があまり良くないときに次のページボタンをクリックし続けたりすることがありました。これは、ネットワークが悪いか、サーバーのパフォーマンスが低いことが原因である可能性があります。

同じイベントやリクエストが頻繁にトリガーされるのを避けるために、この時点ではスロットリングとアンチシェイクが使用されます。

何？これは何ですか？これら 2 つの名前を初めて聞いたとき、データトラフィックの節約と手ぶれの防止を意味するものだと思いました。私は困惑しながらも、すぐに学習を始めました。

コンセプト：

簡単に言えば、スロットリングと手ぶれ防止は、イベントが短時間に複数回トリガーされるのを防ぐための 2 つのソリューションです。これらはすべて、負荷を軽減し、パフォーマンスを向上させるために、リクエストの数を減らす方法を使用します。

違い

スロットリング: 一定期間内にリクエストは 1 つだけ行われます。

これは次のように理解できます。バスでは、各人がクリックリクエストであり、バスは10分ごとに運行し、リクエストが送信されます。

手ぶれ防止: イベントがトリガーされてから n 秒後に機能を実行できます。イベントが n 秒以内にトリガーされた場合、実行時間は再計算されます。

たとえば、一定時間ボタンをクリックし続けると、最後のクリックに基づいてリクエストが送信されます。

スロットリングの実装

解決：

タイムスタンプ（期間の初めに発生する）を使用すると、計算が行われます。

現在のクリック時間 - 関数が最後に実行された時間 > 設定したタイムスタンプ、関数は1回実行されます

デメリット: 最初のトリガーは直接トリガーされ、最後のトリガーは一定期間内にトリガーできない

データを検索し、処理を実行せずにリクエストを開始するシナリオを考えてみましょう。リクエストは頻繁に発生するはずです。

ここに画像の説明を挿入

スロットル機能

コード：

<本文>
    <div>
        <span>スロットリング</span><input id="input" type="text">
        <button id="btn">リクエスト</button>
    </div>
</本文>
<スクリプト>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000)) //クリックイベントリスナー関数を追加 output(e) {
        コンソールログ(これ、e)
        console.log(document.getElementById("input").value) //リクエストをシミュレートする}
//スロットル関数 function throttle(fn, delay) { // fnは実行する関数、delayは遅延時間 var last = 0; //最後の終了時間 return function () {
            var cur = Date.now()
            console.log(現在の最終値)
            if (現在 - 最終 > 遅延) {
                fn.apply(this, arguments) //関数を実行 last = cur //前回を更新}
        }
    }
</スクリプト>

効果：

ここに画像の説明を挿入

手ぶれ補正の実装

解決：

タイマー（タイマーが終了したときに発生します）。デメリット: 初回は発動せず、最終回は遅延する

タイマーを設定するためのものです。クリックし続けるとタイマーがクリアされ、最後にタイマーがオンになった時刻に戻ります。

手ぶれ防止機能

コード：

<本文>
    <div>
        <span>手ぶれ補正</span><input id="input" type="text">
        <button id="btn">リクエスト</button>
    </div>
</本文>
<スクリプト>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000)) //クリックイベントリスナー関数を追加 output(e) {
        コンソールログ(これ、e)
        console.log(document.getElementById("input").value) //リクエストをシミュレートする}
    function debounce(fn, delay) { // fnは実行される関数、delayは遅延時間 var time = null; //timer return function () {
            clearTimeout(time); //タイマーをクリアする let context = this; //現在のボタンコンテキストを取得する 指定されていない場合、矢印関数は常にウィンドウを探します
            args = 引数とします。
            時間 = setTimeout(() => {
                fn.apply(コンテキスト、引数);
            }、 遅れ）;
        }
    }
</スクリプト>

効果：

ここに画像の説明を挿入

手ぶれ補正アップグレード版

最初のトリガーと最後の遅延トリガー

コード：

    function throttle(fn, delay) { // fnは実行される関数、delayは遅延時間です。let time = null
        let flag=true // 初めてトリガーするかどうか return function () {
            clearTimeout(時間)
            if (フラグ) { 
                fn.apply(これ、引数)
                フラグ=偽
            }
            time = setTimeout(() => { //タイマーをトリガーする fn.apply(this, arguments)
                フラグ=true
            }、 遅れ）
        }
    }

効果：

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

スロットルと手ぶれ防止

同じイベントやリクエストが頻繁にトリガーされるのを避けるために、この時点ではスロットリングとアンチシェイクが使用されます。

コンセプト：

違い

スロットリング: 一定期間内にリクエストは 1 つだけ行われます。

これは次のように理解できます。バスでは、各人がクリックリクエストであり、バスは10分ごとに運行し、リクエストが送信されます。

たとえば、一定時間ボタンをクリックし続けると、最後のクリックに基づいてリクエストが送信されます。

スロットリングの実装

解決：

タイムスタンプ（期間の初めに発生する）を使用すると、計算が行われます。

現在のクリック時間 - 関数が最後に実行された時間 > 設定したタイムスタンプ、関数は1回実行されます

デメリット: 最初のトリガーは直接トリガーされ、最後のトリガーは一定期間内にトリガーできない

データを検索し、処理を実行せずにリクエストを開始するシナリオを考えてみましょう。リクエストは頻繁に発生するはずです。

ここに画像の説明を挿入

スロットル機能

コード：

<本文>
    <div>
        <span>スロットリング</span><input id="input" type="text">
        <button id="btn">リクエスト</button>
    </div>
</本文>
<スクリプト>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", throttle(output, 1000)) //クリックイベントリスナー関数を追加 output(e) {
        コンソールログ(これ、e)
        console.log(document.getElementById("input").value) //リクエストをシミュレートする}
//スロットル関数 function throttle(fn, delay) { // fnは実行する関数、delayは遅延時間 var last = 0; //最後の終了時間 return function () {
            var cur = Date.now()
            console.log(現在の最終値)
            if (現在 - 最終 > 遅延) {
                fn.apply(this, arguments) //関数を実行 last = cur //前回を更新}
        }
    }
</スクリプト>

効果：

ここに画像の説明を挿入

手ぶれ補正の実装

解決：

タイマー（タイマーが終了したときに発生します）。デメリット: 初回は発動せず、最終回は遅延する

タイマーを設定するためのものです。クリックし続けるとタイマーがクリアされ、最後にタイマーがオンになった時刻に戻ります。

手ぶれ防止機能

コード：

<本文>
    <div>
        <span>手ぶれ補正</span><input id="input" type="text">
        <button id="btn">リクエスト</button>
    </div>
</本文>
<スクリプト>
    var btn = document.getElementById("btn")
    btn.addEventListener("click", debounce(output, 1000)) //クリックイベントリスナー関数を追加 output(e) {
        コンソールログ(これ、e)
        console.log(document.getElementById("input").value) //リクエストをシミュレートする}
    function debounce(fn, delay) { // fnは実行される関数、delayは遅延時間 var time = null; //timer return function () {
            clearTimeout(time); //タイマーをクリアする let context = this; //現在のボタンコンテキストを取得する 指定されていない場合、矢印関数は常にウィンドウを探します
            args = 引数とします。
            時間 = setTimeout(() => {
                fn.apply(コンテキスト、引数);
            }、 遅れ）;
        }
    }
</スクリプト>

効果：

ここに画像の説明を挿入

手ぶれ補正アップグレード版

最初のトリガーと最後の遅延トリガー

コード：

    function throttle(fn, delay) { // fnは実行される関数、delayは遅延時間です。let time = null
        let flag=true // 初めてトリガーするかどうか return function () {
            clearTimeout(時間)
            if (フラグ) { 
                fn.apply(これ、引数)
                フラグ=偽
            }
            time = setTimeout(() => { //タイマーをトリガーする fn.apply(this, arguments)
                フラグ=true
            }、 遅れ）
        }
    }

効果：

ここに画像の説明を挿入