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は間違ったパスワードを入力する試行回数を制御します
![2012年のベストWebデザイン作品レビュー[パート1]](/upload/images/67cac32417684.webp)
推薦する
主要ブラウザとそのカーネルの紹介
トライデント コア: IE、MaxThon、TT、The World、360、Sogou Brows...
Windows での MySQL の詳細なインストール手順と基本的な使用方法
目次1. MySQLをダウンロードする2. MySQLをインストールする3. MySQL の基本的な...
MySQL ビュー管理ビューの例の詳細説明 [追加、削除、変更、クエリ操作]
この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...
Vueコンポーネント登録方法の解釈
目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...
Linux における $ 記号の基本的な使い方のまとめ
Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...
MySQLデータベースを作成し、中国語の文字をサポートする方法
まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...
JavaScript を使用してカルーセル効果を実装する
この記事では、カルーセルマップの特殊効果を実現するためのJavaScriptの具体的なコードを参考ま...
MySQL の group by に関する簡単な説明
目次1. はじめに2. ユーザーテーブルを準備する2.1 グループ化ルール2.2 グループの使用2....
Iframe の使用を減らすべきいくつかの理由の分析
次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示し...
uniappを使用してWeChatミニプログラムでEChartsを使用する方法
今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。 mpvu...
XHTML 入門チュートリアル: シンプルな Web ページの作成
1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...
Vue はインターフェースのスライド効果を実装します
この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...
ubuntu18.04 での qt5.12.8 のインストールと環境設定に関する詳細なチュートリアル
環境システム: Ubuntu 18.04ソフトウェア: qt5.12.8 1. インストールパッケー...
IntelliJ IDEA に Docker プラグインをインストールする詳細な手順 (2018 バージョン)
目次1. 開発環境2. dockerプラグインをインストールする1. アイデアのインストール2. イ...
Tomcat を使用して Centos 環境に SpringBoot WAR パッケージをデプロイする
戦争パッケージを準備する1. 既存のSpringBootプロジェクトを準備し、pomに依存関係を追加...