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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説
>>: MySQLは間違ったパスワードを入力する試行回数を制御します
推薦する
MySQLクエリの基本的なクエリ操作の学習
序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...
Vue における Vue.use() の原理と基本的な使用法
目次序文1. 例で理解する2. ソースコードを分析する3. まとめ要約する序文他の人のコンポーネント...
CSS3で実装されたグラデーションスライド効果
成果を達成する コードhtml <div class="css-slideshow&...
Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用
cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...
Dockerの匿名マウントと名前付きマウントの具体的な使用法
目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...
Java は Apache.POI を使用して HSSFWorkbook を Excel にエクスポートします
Apache.POI の HSSFWorkbook を使用して Excel にエクスポートします。具...
Alibaba Cloudのセキュリティルール設定の詳細な説明
2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS（サーバー...
dockerでrabbitmqをインストールすると管理ページに入れなくなる問題
1. 環境整備Tencent Cloud Server CENTOS 7 バージョンDockerコン...
Linux での MongoDB のインストールと設定のチュートリアル
MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...
テーブル関連の配置とJavascript操作テーブル、tr、td
適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...
新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法
ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...
MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...
すべてまたは逆の選択機能を実現するJavaScript
この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...
jQuery を使用してカルーセル効果を実装する
本日ご紹介するのは、jQuery を使用してシンプルなカルーセルを実装する方法です。実装の原則は次の...
Linux システムのデュアル ネットワーク カード バインディング構成の実装
システムバージョン [root@ ~]# cat /etc/redhat-release CentO...