Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプルコード

安定

一般的なクラシックアプリケーション: アコーディオン効果

導入

手ぶれ補正機能のないウェブサイト:

ここに画像の説明を挿入

手ぶれ補正機能のあるウェブサイト:

画像の説明を追加してください

手ぶれ補正シーン1（マウスの動き込み）

ジッター: ユーザーはこのインタラクションをトリガーするつもりはありませんが、偶発的なマウスのジッターによりインタラクションイベントが誤ってトリガーされます。
例: 5枚目の写真を見たいです。 2 3 4 の写真は見たくないです。しかし、マウスが最初の絵から 5 番目の絵にスライドしたとき、誤って 2 3 4 の上に止まってしまいました。誤ったトリガー。

機能アンチシェイク: ユーザーがイベントを連続して複数回トリガーした場合、最後のイベントのみが実行されます。

解決原理: タイマーをオンにします。間隔内にイベントが複数回トリガーされた場合は、そのたびに前のタイマーをクリアします。

例とソリューションコード:

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <title>アニメーション事例「アコーディオン」</title>
    <スタイル>
      * {
        マージン: 0;
        パディング: 0;
      }
      ul {
        リストスタイル: なし;
        幅: 2400ピクセル;
      }
      ＃箱 {
        幅: 1200ピクセル;
        高さ: 400px;
        境界線: 1px 実線の赤;
        マージン: 100px 自動;
        オーバーフロー: 非表示;
      }
      #ボックスli {
        幅: 100ピクセル;
        高さ: 400px;
        フロート: 左;
        遷移: すべて 0.5 秒のイーズアウト。
      }
      #ボックスli.over {
        幅: 800ピクセル;
      }
    </スタイル>
  </head>

  <本文>
    <div id="ボックス">
      <ul>
        <li v-for="(item,index) リスト内" :class="{over:overIndex == index}" @mouseenter="doEnter(index)">
            <img :src="item" alt="">
        </li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <スクリプト>
      アプリを新しいVue({
          el:'#ボックス',
          データ：{
              オーバーインデックス:0,
              リスト：[
                  './images/collapse/1.jpg',
                  './images/collapse/2.jpg',
                  './images/collapse/3.jpg',
                  './images/collapse/4.jpg',
                  './images/collapse/5.jpg',
              ]、
              時間ID:null
          },
          メソッド: {
              doEnter(インデックス){
                  /* 手ぶれ補正を有効にする*/
                  //1.1 最初に最後のタイマーをクリアし、この時間を参照として使用します clearTimeout(this.timeID)
                  //1.2 タイマーを開始する（手ぶれ補正間隔）
                  this.timeID = setTimeout(()=>{
                    this.overIndex = インデックス;
                  },500)
              }
          },
      })
    </スクリプト>
  </本文>
</html>

手ぶれ補正シーン2（キーボードのキー）

典型的な応用シナリオ: 関連語の検索
- 開発中、この機能のバックエンドはミドルウェア「OpenSearch」または「Elasticsearch」を使用し、バックエンドのロジック処理は非常に効率的かつ高速になります。
-これはフロントエンドの観点に基づいており、HTTPリクエストを削減するという観点から最適化されています。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
</head>
<本文>
    <input type="text" placeholder="検索内容を入力してください">
    <スクリプト>
        timeID = null とします。
        document.querySelector('input').oninput = function(){
            /* 手ぶれ補正機能 */
            //(1) まず前回のタイマーをクリアするclearTimeout(timeID)
            //(2) 手ぶれ補正タイマーを有効にする timeID = setTimeout(() => {
                console.log( this.value );
            }, 500);
        }
    </スクリプト>
</本文>
</html>

関数のスロットリング

コンセプト: 高頻度イベントによって発生するパフォーマンスの問題を解決します。高頻度イベント: ページ内で、一部のイベントが非常に頻繁にトリガーされます。
たとえば、マウスの動き、スクロールホイールのイベントなどです。

解決策: ユーザーがイベントを連続して複数回トリガーした場合、指定された時間内にイベントは 1 回だけトリガーされます。

例とソリューションコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        体{
            高さ: 3000ピクセル;
        }
    </スタイル>
</head>
<本文>
    <スクリプト>
        lastTime を null にします。
        
        i = 1 とします。
        window.onmousemove = 関数(){
            /* 関数のスロットリング */
            //(1) 2つのトリガーイベント間の時間間隔を決定する let time = Date.now()
            if( 時間 - 最終時刻 >= 500 ){
                console.log('マウスの移動回数: ' + i++);
                //(2) このトリガー時刻は次の参照間隔として使用されます lastTime = time
            }
        }
        // j = 1 とします。
        // window.onscroll = function(){
        // //(1) 2つのトリガーイベント間の時間間隔を決定する// let time = Date.now()
        // if( 時間 - lastTime >= 500 ){
        // console.log('マウスのスクロール回数: ' + j++);
        // //(2) このトリガー時刻は次回の参照間隔として使用されます // lastTime = time
        // }   
        // }
    </スクリプト>
</本文>
</html>

上記は、Web プロジェクト開発における JS 機能の手ぶれ防止とスロットリングのサンプルコードの詳細です。Web プロジェクトにおける JS 機能の手ぶれ防止とスロットリングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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