JavaScript の手ぶれ補正とスロットリングの詳細な説明

JavaScript の手ぶれ補正とスロットリングの詳細な説明

デバウンス

定義: スクロール イベントなど、短時間に連続してトリガーされるイベントの場合、アンチシェイクとは、イベント処理機能が一定の制限時間内に 1 回だけ実行されることを意味します。

手ぶれ防止については、指でバネを押すことを例に挙げてみましょう。指でバネを押し、押し続けます。指を離すまでバネは跳ね返りません。

サイズ変更の例:

関数デバウンス(fn, wait){
    var タイマー = null;
    戻り値 () =>{
        if(タイマー !== null){
            タイマーをクリアします。
        }
        タイマー = setTimeout(fn, wait);
    }
}
関数ハンドル(){
    コンソールにログ出力します。
}
window.addEventListener("resize",debounce(handle, 1000));

上記は即時実行版ではない

即時実行バージョン

関数デバウンス(fn, wait){
	timeid、flag = true とします。
	戻り値 () => {
		タイムアウトをクリアします(timeid);
		if(フラグ){
			関数fn();
			フラグ = false;
		}それ以外{
			タイムID = setTimeout(()=>{
				フラグ = true;
			}、 待って);
		}
	}
}

ブラウザ ウィンドウをドラッグするとサイズ変更がトリガーされますが、この時点ではハンドル関数はトリガーされません。タイマーがカウントを開始します。タイミング時間内にサイズ変更が再度トリガーされると、タイマーが再び開始されます。これの利点は、ブラウザ ウィンドウをドラッグしてサイズ変更をトリガーすると、ハンドル関数が頻繁に実行されず、必要なときにのみ実行されるため、冗長性が効果的に排除されることです。

一般的な書き方:

const デバウンス = (func, 遅延 = 200) => {
  タイムアウト = null にする
  関数を返す(){
    clearTimeout(タイムアウト)
    タイムアウト = setTimeout(() => {
      func.apply(これ、引数)
    }、 遅れ)
  }
}

スロットル

定義: 一定期間内にイベントを 1 回だけ実行します。

本来の意図は、蛇口から滴り落ちる水のように、指定された時間内に 1 回だけ実行し、頻繁な繰り返し実行を減らすことです。

検索ボックスの入力イベントなど。

タイムスタンプで計算:

関数スロットル(fn,wait){
  startTime を 0 にします。
  関数()を返す{
    endTime を Date.now() とします。
    if(終了時間-開始時間>待機){
      関数fn();
      開始時間 = 終了時間;
    }
  }
}

タイマー別:

関数スロットル(fn,wait){
  timeid = null とします。
  関数()を返す{
    if(!timeid){
       timeid = setTimeout(関数(){
         関数fn();
         タイムID = null;
       }、待って)
    }
  }
}

要約する

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

以下もご興味があるかもしれません:
  • JavaScript の手ぶれ補正機能の分析
  • JavaScriptのアンチシェイクとスロットリングとは
  • JavaScript スロットリングとアンチシェイクに関する簡単な説明
  • JavaScript の手ぶれ補正とスロットリングの説明
  • JavaScript のアンチシェイクとスロットリングについてご存知ですか?

<<:  Docker のタイムゾーンの問題とデータ移行の問題

>>:  XHTML チュートリアル: 初心者のための XHTML の基礎

推薦する

このリファレンスとJavaScriptのカスタムプロパティの詳細な説明

目次1. このキーワード2. カスタム属性3. 包括的なケース1:タブの実装付録要約する1. このキ...

クラウド決済を実装するWeChatミニプログラムについて

目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...

MySQLデータベースのマスタースレーブ同期構成と読み取り書き込み分離

MySQL マスター スレーブ レプリケーションを使用する利点は次のとおりです。 1. 安定性を向上...

JavaScript は 3 つの一般的な Web 効果 (オフセット、クライアント、スクロール シリーズ) を実装します。

目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...

Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

ポップアップウィンドウの上下中央左右と透明な背景のロックウィンドウ効果を実現する CSS

クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...

HTMLフォームのいくつかの送信方法の概要

最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...

WeChatアプレットがスネークゲームを実装

この記事では、参考までに、スネークゲームを実装するためのWeChatアプレットの具体的なコードを紹介...

LinuxシステムにおけるMySQLの一般的な操作コマンド

仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...

WeChatアプレットのスクロールビューの改行問題を解決する

今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

Linuxサーバーのディスク容量を拡張する方法

目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...

Nginx で WordPress を設定する方法

以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...