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

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

安定

自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始します。5 秒以内に別の人がドアに近づくと、ドアは人を感知して再び 5 秒間のカウントダウンを開始します。

イベントがトリガーされると、遅延が設定されます。この期間中にイベントが再度トリガーされると、遅延が終了してアクションが実行されるまで遅延がリセットされます(複数のトリガーを防ぐため)。

ウェブアプリケーション

  • ページサイズの変更に関する統計
  • スクロールページ位置の統計
  • 入力ボックスでの連続入力の要求回数を制御する

まず、ボタンをクリックして、 console.log('pay money')

<本文>
  <button id="btn">クリック</button>
</本文>
<スクリプト>
  定数 btn = document.getElementById('btn')
  関数payMoney() {
    console.log('お金を支払う');
  }
  btn.addEventListener('click'、payMoney) を実行します。
</スクリプト>

デバウンスの定義

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数デバウンス(func) {
  // 関数内の関数を返し、クリックされたときにのみ関数を返します return function () {
    関数()
  }
}
btn.addEventListener('click'、debounce(payMoney))

遅延の設定

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数 debounce(func, delay) {
  関数を返す(){
    setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

遅延のクリア: 実行に失敗しました

理由

クリックするたびに、戻り関数の内容が実行されます

各クリックの実行機能は独立しており、相互に干渉しません。

両者の間には接続がないため、クリア遅延はここではまったく機能しません。

これらの独立した実行関数を接続するには、スコープチェーン(クロージャ)を使用する必要があります。

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数 debounce(func, delay) {
  関数を返す(){
    タイマーを鳴らす
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

タイマーを戻り関数の外側に配置して、リスニング イベントが定義されると同時にtimer変数が定義されるようにします。

スコープ チェーンにより、すべての独立した実行関数がこのタイマー変数にアクセスできます。

そして、このタイマー変数は一度だけ作成されます。ユニークです。タイマーに値を割り当てて遅延させるだけです。

各クリア遅延は最後に定義された遅延をクリアします。これは、複数の関数が同じ外部変数を共有するのと同じです。

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  関数を返す(){
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

このコードでは、これはウィンドウを参照しますか?

コールバックのため、ランタイムはすでにWindowの下にある

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
  console.log(これを);
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  関数を返す(){
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

解決

setTimeout の前にこれを保存します。今回はボタンを指します。

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
  console.log(これを);
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  // この関数はクリックされたときにのみ返されるので、これはボタンを指す戻り関数 () です {
    コンテキスト = this
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => {
      func.apply(コンテキスト)
    }、 遅れ)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

パラメータの問題を考慮し、argを追加する

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
  console.log(これを);
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  関数を返す(){
    コンテキスト = this
    args = 引数
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => {
      func.apply(コンテキスト)
      console.log(コンテキスト、引数);
    }、 遅れ)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

スロットリング

一度トリガーすると、将来的に複数のトリガーが発生できなくなります

スクロール画面: ユーザーのスクロール動作をカウントして、対応するWebページの応答を作成します。

ユーザーがスクロールし続けるとリクエストが生成され続け、リクエストの数が増え続けるため、ネットワークの輻輳が発生しやすくなります。

イベントがトリガーされたらすぐにタスクを実行し、時間間隔の制限を設定できます。この間、ユーザーがどのようにスクロールしても、操作は無視されます。

時間が経過した後、ユーザーがスクロール動作を行っていることが検出された場合、タスクが再度実行されます。時間間隔を設定する

まず、ページのサイズ背景色を変更するコードを記述します

関数カラーリング() {
  r = Math.floor(Math.random() * 255) とします。
  g = Math.floor(Math.random() * 255) とします。
  b = Math.floor(Math.random() * 255) とします。
  document.body.style.background = `rgb(${r}, ${g}, ${b})`
}
window.addEventListener('resize', 色付け)
関数スロットル(func, delay) {
  タイマーを鳴らす
  関数を返す(){
    タイマー = setTimeout(_ => {
      関数()
    }、 遅れ)
  }
}
window.addEventListener('resize', throttle(coloring, 2000))

トリガーされたイベントが時間間隔内であるかどうかを判断する

  • 含まれていない: トリガーイベント
  • In: イベントは発生しません
関数スロットル(func, delay) {
  タイマーを鳴らす
  関数を返す(){
    // タイマーに値が割り当てられている場合は、直接戻ります。つまり、タスクは実行されません。if (timer) {
      戻る
    }
    // この時点ではタイマーに値が割り当てられていないか、タイマーが実行されています // 遅延実行のためにタイマーに値を割り当てます timer = setTimeout(_ => {
      関数()
      // 遅延実行後、タイマーの値をクリアする必要があります。timer = null
    }、 遅れ)
  }
}
window.addEventListener('resize', throttle(coloring, 2000))

この点を解決してください(現在の例はウィンドウの下にありますが)

関数スロットル(func, delay) {
  タイマーを鳴らす
  関数を返す(){
    コンテキスト = this
    args = 引数
    // タイマーに値が割り当てられている場合は、直接戻ります。つまり、タスクは実行されません。if (timer) {
      戻る
    }
    // この時点ではタイマーに値が割り当てられていないか、タイマーが実行されています // 遅延実行のためにタイマーに値を割り当てます timer = setTimeout(_ => {
      func.apply(コンテキスト、引数)
      // 遅延実行後、タイマーの値をクリアする必要があります。timer = null
    }、 遅れ)
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

スロットリングコア: イベント間隔 もう一つの一般的な時間間隔は、Dateオブジェクトを使用することです

関数スロットル(func, delay) {
  // 時間間隔が経過したかどうかを判断するために、前の時点と比較する必要があります // 実行されるたびに自動的に変更されるのを避けるために、戻り関数の外側で let pre = 0
  関数を返す(){
    // 関数が実行されたときの時間を保存する let now = new Date()
    // 最初は必ず実行されます if (now - pre > delay) {
      // 時間間隔が経過し、関数を実行できるようになった func()
      // 実行後、間隔ポイントをリセットします pre = now
    }
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

パラメータの問題を解く

関数スロットル(func, delay) {
  pre = 0 とする
  関数を返す(){
    コンテキスト = this
    args = 引数
    now = new Date() とします
    if (現在 - 事前 > 遅延) {
      func.apply(コンテキスト、引数)
      前 = 今
    }
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

要約する

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

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

<<:  Linux で Jenkins プロジェクトを構築するプロセス (CentOS 7 を例に)

>>:  MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

推薦する

MySQL DML言語操作例

追加説明、外部キー: 外部キーを使用しないでください。すべての外部キーの概念はアプリケーション層で解...

Element UI で自動サイズ調整テキストエリアの高さを設定する方法

Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

CSS3のall属性の使い方を理解する

1. 互換性以下のように表示されます。 互換性は問題ありません。IE を除き、他のブラウザは基本的に...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

MySQL のスローログオンラインの問題と最適化ソリューション

MySQL スロー ログは、MySQL DBA やその他の開発および運用担当者が細心の注意を払う必要...

XHTML の IE 条件付きコメント

<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...

Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明

Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

Vue 開発プロジェクトで Font Awesome 5 を使用する方法

目次依存関係をインストールする構成使用1.アイコン検索ページに入る2. 使用したいアイコンの英語名を...

React 入門レベルの詳細なメモ

目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...

MySQL でのバイナリ型操作

この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...

node.js で Web サーバーを作成する手順の詳細な説明

序文node.js でサーバーを作成するのは非常に簡単です。小さいながらも完全な Web サーバーを...

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

MySQL関連のツールをいくつかお勧めします

序文:インターネット技術の継続的な発展に伴い、MySQL 関連のエコシステムはますます充実し、ますま...