JS 手ぶれ補正機能の実装と使用シナリオ

1. 手ぶれ補正機能とは何ですか？

概念: 関数のデバウンスとは、イベントがトリガーされた後、関数は n 秒以内に 1 回しか実行できないことを意味します。イベントがトリガーされてから n 秒以内に別のイベントがトリガーされた場合、関数の実行遅延時間が再計算されます。

1. なぜ手ぶれ補正機能が必要なのでしょうか?

フロントエンドの開発プロセスでは、onresize、scroll、mousemove、mousehover など、頻繁に（短時間に複数回）トリガーされるイベントがいくつかあります。制限がない場合、1 秒間に数十回または数百回実行される可能性があります。これらの関数内で他の関数、特に DOM を操作する関数（DOM に対するブラウザ操作はパフォーマンスに非常に負荷がかかります）が実行されると、コンピュータリソースが浪費されるだけでなく、プログラムの速度が低下し、ブラウザがフリーズしたりクラッシュしたりすることさえあります。

2. 手ぶれ補正機能のポイント

関数のデシェイキングの重要なポイントは、実装を支援し、実行されるコードの実行を遅らせるために setTimeout が必要であることです。メソッドが複数回トリガーされた場合、前回記録された遅延実行コードは clearTimeout でクリアされ、タイミングが再び開始されます。タイミング期間中にイベントが再トリガーされない場合、遅延時間が完了した後にターゲットコードが実行されます。

3. 手ぶれ補正機能の実装

//HTML部分 <div>
    アカウント: <input type="text" id="myinput">
</div>

//JS 部分 function debounce(fun,wait=1500){//ES6 構文 wait=1500 はパラメータのデフォルト値を設定します。wait が入力されていない場合は、1500 が使用されます。
        タイムアウト = null にする
        関数()を返す{
            if(timeout){//タイマーが存在する場合はそれをクリアします clearTimeout(timeout)
            }
            タイムアウト = setTimeout(関数(){
                楽しい（）
            }、待って）
        }

    }
関数testUname(){
    console.log("入力終了!")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))

上記のコードは、手ぶれ補正機能の簡単な応用例です。各入力の間隔が 1 秒以上ある限り、入力を停止するまで「Print input end!」は表示されません。これは、各入力によって前のタイマーがクリアされるためです。

これを読んで終わりだと思いますか？心配しないで、見続けましょう:

//HTML部分 <div>
    アカウント: <input type="text" id="myinput">
</div>

//JS部分 function debounce(fun,wait=1500){
        タイムアウト = null にする
        関数()を返す{
            console.log(this) //<input id="myinput" type="text">
            console.log(arguments) // 引数 { 0: input, … }
            if(timeout){//タイマーが存在する場合はそれをクリアします clearTimeout(timeout)
            }
            タイムアウト = setTimeout(関数(){
                console.log(this) //ウィンドウ
                console.log(arguments) // 引数 { … }
                楽しい（）
            }、待って）
        }

    }
関数testUname(){
    console.log("入力終了!")
}
document.getElementById('myinput').addEventListener('input',debounce(testUname,1000))

手ぶれ補正であれ、スロットリングであれ、この指摘と議論という 2 つの問題を解決する必要があります。

特別な参照がない場合、setInterval および setTimeout のコールバック関数内の this は window を参照します。これは、JS タイマーメソッドが window の下に定義されているためです。これは明らかに私たちが望んでいることではありません。入力ボックスを監視しているので、タイマー内の this が入力を指すようにしたいのです。

それで、これが指し示すものを変更する方法はあるのでしょうか?

簡単な方法は、パラメータを使用して、タイマー外部関数の this と引数を保存することです。次に、apply を使用して、タイマーによって実行される関数 fun の方向を変更します。

//JS部分 function debounce(fun,wait=1500){
            タイムアウト = null にする
            関数()を返す{
                _this = this とします
                arg = 引数
                if(timeout){//タイマーが存在する場合はそれをクリアします clearTimeout(timeout)
                }
                タイムアウト = setTimeout(関数(){
                    console.log(_this) //<入力 id="myinput" タイプ="text">
                    console.log(arg) // 引数 { 0: input, … }
                    fun.apply(_this,arg)
                }、待って）
            }
         
        }

もちろん、ES6 の矢印関数の新機能も使用できます。矢印関数の this は、関数が実行される時ではなく、関数が定義されている時に常に this を指します。矢印関数では、次の文を覚えておく必要があります: 「矢印関数には this バインディングがないため、その値はスコープチェーンを検索して決定する必要があります。矢印関数が非矢印関数に含まれている場合、 this は最も近い非矢印関数の this にバインドされ、それ以外の場合、 this は未定義になります。」

したがって、次のように書くこともできます。

//JS部分 function debounce(fun,wait=1500){
            タイムアウト = null にする
            関数()を返す{
                if(timeout){//タイマーが存在する場合はそれをクリアします clearTimeout(timeout)
                }
                タイムアウト = setTimeout(()=>{
                    console.log(this) //<input id="myinput" type="text">
                    console.log(arguments) // 引数 { 0: input, … }
                    fun.apply(これ、引数)
                }、待って）
            }
         
        }

4. 手ぶれ補正機能の使用シーン

手ぶれ補正機能は一般的にどのような場面で使われるのでしょうか？通常、連続イベントでコールバックを 1 回だけトリガーする必要がある場合に使用されます。具体的には：

検索ボックスは入力内容を検索します。リクエストを送信する前に、ユーザーが最後の入力を完了するまで待機します。
ユーザー名、携帯電話番号、電子メールの入力の確認。
ブラウザウィンドウのサイズが変更された場合は、ウィンドウを調整した後に resize イベント内のコードを実行するだけで、レンダリングが繰り返されるのを防ぐことができます。

2. 機能スロットリングとは

コンセプト: 関数が一定期間内に 1 回だけ実行されるように制限します。

たとえば、電車や地下鉄に乗ってセキュリティチェックを受ける場合、セキュリティチェックを完了するために警備員に協力するため、一定時間内（たとえば 10 秒）にセキュリティチェックの入り口を通過できるのは 1 人の乗客だけです。上記の例では、10 秒ごとに 1 人の乗客のみが通過を許可されています。分析から、「関数スロットリング」の重要なポイントは、アクションが一定時間内に 1 回だけ実行されるように制限することであることがわかります。

1. 機能スロットリングのポイント

主な実装のアイデアは、setTimeout タイマーを使用することです。遅延時間を設定して、初めて呼び出されたときにタイマーを作成し、最初に変数を設定し、この変数にタイマーを割り当ててから、実行する関数を記述します。この関数が 2 回目に実行されると、変数が true であるかどうかが判断され、 true の場合は戻り値が返されます。最初のタイマーが関数を実行すると、変数は false に設定されます。次に変数が判断されるときに false となり、関数が順番に実行されます。目的は、複数の関数要求の最後の呼び出しのみが一定時間内に実行されるようにすることです。
このように見ると少し混乱しますか?コードを見てみましょう:

2. 機能スロットリングの実装

//JS 部分 function debounce(fun,wait=1000){//タイマーソリューション let timer = null;//最初に変数を設定します return function(){
                if(!timer){//タイマーが null の場合は、timer = setTimeout(function() と入力します。{//次に、この変数にタイマーを割り当てます。fun()//次に、実行する関数を記述します。timer = null//最初のタイマーは関数を実行し、最後に変数を false に設定します。ここで、timer = null には 2 つの機能があります。1. 次のエントリを開く、2. 後続のタイマーをクリアする})

                }
            }
        }
関数testUname(){
    console.log(Math.random())
}
document.getElementById('myinput').addEventListener('input',debounce(testUname))

同様に、スロットル機能も this と引数の問題を解決する必要があります。改善点は次のとおりです。

//矢印関数の記述 function debounce(fun,wait=1000){
            タイマーを null にする
            関数()を返す{
                if(!タイマー){
                    タイマー = setTimeout(()=>{
                        fun.apply(これ、引数)
                        タイマー = null
                    }、待って）

                }
            }
}
//パラメータ保存メソッド function debounce(fun,wait=1000){
        タイマーを null にする
        関数()を返す{
            _this = this とします
            arg = 引数
            if(!タイマー){
                タイマー = setTimeout(関数(){
                    fun.apply(_this,arg)
                    タイマー = null
                }、待って）

            }
        }
}

3. 機能スロットリングの使用シナリオ

ここまでで、関数スロットリングについてより詳しく理解していただけたかと思います。では、関数スロットリングは一般的にどのような状況で使用されるのでしょうか?

遅延読み込み、スクロール読み込み、さらに読み込み、またはスクロールバーの位置を監視します。
Baidu検索ボックス、検索関連機能。
頻繁なクリック送信やフォームの繰り返し送信を防止します。

要約する

これで、JS 手ぶれ補正機能の実装と使用シナリオに関するこの記事は終了です。より関連性の高い JS 手ぶれ補正機能のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: