デバウンス定義: スクロール イベントなど、短時間に連続してトリガーされるイベントの場合、アンチシェイクとは、イベント処理機能が一定の制限時間内に 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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker のタイムゾーンの問題とデータ移行の問題
>>: XHTML チュートリアル: 初心者のための XHTML の基礎
目次1. このキーワード2. カスタム属性3. 包括的なケース1:タブの実装付録要約する1. このキ...
目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...
MySQL マスター スレーブ レプリケーションを使用する利点は次のとおりです。 1. 安定性を向上...
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
クリック後にポップアップボックスを実現し、上下左右に中央揃えし、灰色の透明マスクを追加してウィンドウ...
最も一般的で、最もよく使用され、最も一般的な方法は、submit タイプを使用することです。コードを...
この記事では、参考までに、スネークゲームを実装するためのWeChatアプレットの具体的なコードを紹介...
仕える: # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...
この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...
今日、小さなプログラムを書いていたときに、スクロールビューを使用したのですが、スクロールビュー内のテ...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
HTMLコード: <a onclick="goMessage();" st...
目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...
以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...