Vue で手ぶれ補正とスロットリングを使用する方法

序文

ムービープロジェクトでは、ページを切り替えてから現在のムービーリストページに戻るとムービーデータの最初の部分に戻ってしまうことを防ぐために、ムービーリスト内のドロップダウンの現在の位置を保存したいと考えています。

このとき、少しスライドするたびに現在の位置を保存するのではなく、一定時間ごとに 1 回保存するようにします。このとき、手ぶれ補正とスロットリングを使用できます。

コンセプト

簡単に言えば、手ぶれ補正はタイマーを使用して目的を達成することです。

デバウンス:

コールバックはイベントがトリガーされてから n 秒後に実行されます。n 秒以内に再度トリガーされた場合は、タイミングが再開されます。

典型的な例は入力ボックス検索です。入力が完了してから n 秒後に検索要求が行われ、n 秒以内にさらにコンテンツが入力されると時間がリセットされます。

スロットル：

機能は単位時間内に 1 回のみ起動できると規定されています。この単位時間内に機能が複数回起動された場合、そのうち 1 つだけが有効になります。

典型的なケースとしては、マウスを連続的にクリックしてトリガーし、n 秒以内に複数回クリックしても 1 回しか有効にならないように規定されています。

安定

意味

頻繁な操作はジッターを防ぎます。操作後 n 秒以内に操作が行われない場合、イベントがトリガーされます。操作が継続すると、タイミングがリセットされます。

使用シナリオ

入力ボックス入力
サイズ変更

コード

// ユーティリティ.js
// 即時: 関数の実行をすぐに開始するかどうか debounce(func, delay = 300, immediate = false) {
    タイマーを null にする
    関数()を返す{
        if (タイマー) {
            タイムアウトをクリア(タイマー)
        }
        if (即時 && !タイマー) {
            func.apply(これ、引数)
        }
        タイマー = setTimeout(() => {
         func.apply(これ、引数)
        }、 遅れ）
    }
}

Vueでの使用

方法1: パブリックメソッドutilsに記述して導入する

'utils' から { debounce } をインポートします
メソッド: {
    appSearch:debounce(function(e.target.value){
        this.handleSearch(値)
    }, 1000),
    ハンドル検索(値) {
        console.log(値)
    }
}

方法2: 現在のvueファイルに書き込む

データ: () => {
  戻る {
    デバウンス入力: () => {}
  }
},
メソッド: {
  showApp(値) {
    console.log('値', 値)
  },
  デバウンス(func, 遅延 = 300, 即時 = false) {
    タイマーを null にする
    関数()を返す{
        if (タイマー) {
            タイムアウトをクリア(タイマー)
        }
        if (即時 && !タイマー) {
            func.apply(これ、引数)
        }
        タイマー = setTimeout(() => {
         func.apply(これ、引数)
        }、 遅れ）
    }
  }
},
マウント() {
  this.debounceInput = this.debounce(this.showApp, 1000)      
},

スロットリング

意味

頻繁な操作は関数の実行を薄めます。頻繁な操作が発生すると、関数は n 秒ごとに 1 回だけトリガーされます。

使用シナリオ

マウスクリック、マウスダウン、マウス移動は単位時間あたり1回だけ実行されます。
スクロールイベント、遅延読み込み、スクロール読み込み、さらに読み込み、またはスクロールバーの位置の監視
頻繁なクリック送信やフォームの繰り返し送信を防ぐ

コード

// ユーティリティ.js
関数スロットル（関数、遅延 = 300）{    
    前 = 0 とする
    関数()を返す{
        now = Date.now() とします。
        if ((現在 - 前回) >= 遅延) {
            func.apply(これ、引数)
            prev = Date.now()
        }
    }
}

Vueでの使用

使い方は手ぶれ補正と同じ

要約する

Vue での手ぶれ補正とスロットリングの使用に関するこの記事はこれで終わりです。Vue の手ぶれ補正とスロットリングの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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