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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript のアンチシェイクとスロットリングの違いと実装
  • JavaScriptのアンチシェイクとスロットリングとは
  • JavaScript の手ぶれ補正機能の分析
  • JavaScript における手ぶれ補正とスロットリング機能の詳細な説明
  • JavaScript によるスロットリングと手ぶれ補正の詳細な理解
  • jsのアンチシェイクスロットリングについて詳しく説明します
  • JavaScript における手ぶれ補正とスロットリングの違いと適用可能なシナリオ

<<:  Nginx ドメイン名 SSL 証明書の構成 (Web サイトの http を https にアップグレード)

>>:  単一の MySQL テーブル内の行数が 500 万を超えてはいけないのはなぜですか?

推薦する

CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

CSS3 背景画像関連互換性: IE9+背景クリップ 背景画像描画領域background-cli...

MySQL クエリの最適化: クエリが遅い原因と解決策

開発に携わっている友人、特に MySQL に関係のある友人は、非常に遅い MySQL クエリに遭遇す...

Win10 に Linux ubuntu-18.04 デュアル システムをインストールする (インストール ガイド)

コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...

Linux ps および pstree コマンドの知識ポイントのまとめ

Linux の ps コマンドは Process Status の略です。 ps コマンドは、システ...

トップ 10 Js 画像処理ライブラリ

目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...

WebデザイナーがRetinaディスプレイデバイス向けの画像を作成する方法

特記事項:この記事は、Chris Spooner の英語記事「Web デザイン用の Retina グ...

MySQL をクリーンにアンインストールする方法 (テスト済みで効果的)

Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

CenOS6.7 は MySQL8.0.22 (推奨コレクション) をインストールします1. MyS...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します

この関数の効果はvue的provide/injectに似ています。 contextを通じて反応できる...

Vue の img の src 画像アドレスの動的スプライシングの問題について

Vue での img の動的スプライシングを見てみましょう。src 画像アドレス、具体的な内容は次の...

ノードを使用して静的ファイルキャッシュを実装する方法

目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0のインストールと設定方法は参考までに。具体的な内容は以下のとおりです。ダウンロード...