安定
ウェブアプリケーション
まず、ボタンをクリックして、 <本文> <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)) タイマーを戻り関数の外側に配置して、リスニング イベントが定義されると同時に スコープ チェーンにより、すべての独立した実行関数がこのタイマー変数にアクセスできます。 そして、このタイマー変数は一度だけ作成されます。ユニークです。タイマーに値を割り当てて遅延させるだけです。 各クリア遅延は最後に定義された遅延をクリアします。これは、複数の関数が同じ外部変数を共有するのと同じです。 定数 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)) トリガーされたイベントが時間間隔内であるかどうかを判断する
関数スロットル(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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で Jenkins プロジェクトを構築するプロセス (CentOS 7 を例に)
>>: MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件
追加説明、外部キー: 外部キーを使用しないでください。すべての外部キーの概念はアプリケーション層で解...
Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...
概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...
1. 互換性以下のように表示されます。 互換性は問題ありません。IE を除き、他のブラウザは基本的に...
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...
MySQL スロー ログは、MySQL DBA やその他の開発および運用担当者が細心の注意を払う必要...
<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...
Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...
背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...
目次依存関係をインストールする構成使用1.アイコン検索ページに入る2. 使用したいアイコンの英語名を...
目次1. Reactの基本的な理解1. はじめに2. Reactの特徴3. Reactが効率的な理由...
この記事は主にMySQLデータベースのバイナリ型操作を紹介し、具体的な内容を通して紹介します。MyS...
序文node.js でサーバーを作成するのは非常に簡単です。小さいながらも完全な Web サーバーを...
目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...
序文:インターネット技術の継続的な発展に伴い、MySQL 関連のエコシステムはますます充実し、ますま...