JavaScript 手ぶれ補正のケーススタディ

JavaScript 手ぶれ補正のケーススタディ

原理

手ぶれ補正の原理は、イベントをトリガーすることはできますが、イベントがトリガーされてから n 秒後に実行する必要があるというものです。イベントがトリガーされてから n 秒以内にこのイベントを再度トリガーすると、新しいイベントの時間を基準にして、n 秒後に実行します。つまり、イベントがトリガーされ、n 秒以内にそれ以上イベントがトリガーされなくなるまで実行されません。

場合

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>デバウンス</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        #容器 {
            幅: 100%;
            高さ: 200px;
            行の高さ: 200px;
            テキスト配置: 中央;
            色: #fff;
            背景色: #444;
            フォントサイズ: 30px;
        }
    </スタイル>
</head>
<本文>
    <div id="コンテナ"></div>
    <script src="debounce.js"></script>
</本文>
</html>
関数 getUserAction(e) {
    console.log(これを);
    コンソールログ(e);
    コンテナ内のHTML要素の数。
};
関数デバウンス(func, wait) {
    var タイムアウト;
    関数を返す(){
        タイムアウトをクリアします(タイムアウト);
        タイムアウト = setTimeout(() => {
            func.apply(this, arguments); // this とイベントオブジェクトイベントを解決します
        }、 待って);
    }
}
コンテナの onmousemove をデバウンスします (getUserAction、1000)。 

JavaScript 手ぶれ補正のケーススタディに関するこの記事はこれで終わりです。JavaScript 手ぶれ補正に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS 手ぶれ補正機能の実装と使用シナリオ
  • JavaScript のデシェイクとスロットリングの例
  • JS 関数のアンチシェイクと関数スロットリングを理解する方法
  • Javascript スロットル関数とデバウンス関数
  • JavaScript のアンチシェイクとスロットリングで発生した奇妙な問題と解決策
  • 面接でJavaScriptのスロットリングとデシェイク関数を手書きする方法
  • js スロットリングとアンチシェイクの適用シナリオと、vue でのスロットリングとアンチシェイクの具体的な実装
  • JavaScript スロットリングと手ぶれ補正機能についての簡単な説明

<<:  NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

>>:  MySQLは間違ったパスワードを入力する試行回数を制御します

推薦する

データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策

序文mysql がデフォルトのデータベース パスを変更したため、サービスを開始できませんでした。ログ...

CSS マルチカラムレイアウトソリューション

1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...

HTML で JavaScript を使用する

<script> タグHTML5では、スクリプトには次の属性があります: async、d...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

VueはEChartsを使用して折れ線グラフと円グラフを実装します

バックエンド管理プロジェクトを開発する場合、バックエンドのユーザーデータをカウントし、折れ線グラフや...

dockerでデプロイされたjenkinsでgitプログラムを実行する際の問題について

1. まず、gitを関連付けるときにエラーメッセージが報告されます: エラー: ビルドするリビジョン...

iframe ページパラメータの文字化けの問題について議論

非常に珍しいパラメータ文字化けの問題に遭遇しました。まずページを見てみましょう写真に示すように、月次...

JDBC-idea で mysql をインポートして java jar パッケージに接続する (mac)

序文1. この記事ではMySQL 8.0バージョンを使用していますバージョン5.0と比較すると、パッ...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

JavaScript+html はフロントエンドページでランダム QR コード検証を実装します

クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...

Vueのカスタムディレクティブの詳細なガイド

目次1. カスタム指示とは何ですか? 2. 指示をカスタマイズする方法フック機能3. 応用シナリオ入...

CSSとJSでロマンチックな流星群アニメーションを実現

1. レンダリング 2. ソースコードhtml < 本文 > < div クラス ...

JS ネイティブ 2048 ゲーム ソース コード共有 (インターネットの最新情報)

最近、アルゴリズムについて学んでいて、アルゴリズムで動く小さなゲームに出会いました。そのコードは次の...

docker nginxコンテナの起動とローカルへのマウントの詳細な説明

まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...