サイズ変更操作が完了した後にのみアクションを実行するにはどうすればよいですか?

最適なアクションの実行のために 'resize' イベントの 'End' を待ちます

イベント駆動型プログラミングでは、サイズを処理するのが一般的です「resize」イベントを使用して変更します。通常はウィンドウまたはその他のサイズ変更可能な要素に割り当てられます。ただし、サイズ変更操作が発生すると、プロセス中に 'resize' イベントが複数回トリガーされ、イベント ハンドラーの実行が冗長になります。

'resize' イベントの 'End' をキャプチャ

この問題に対処し、サイズ変更が完了した場合にのみアクションを実行するには、「setTimeout()」と「clearTimeout()」を使用する手法を採用できます。

解決策:

サイズ変更アクションのイベント ハンドラーとして機能する関数 'resizew()' を作成します。

function resizedw() {
  // Your action to be performed when resizing finishes
}

変数を宣言します。 「doit」を実行し、「null」として初期化します。この変数は、「setTimeout()」によって返されたタイムアウト ID を保持します。

var doit = null;

イベント リスナーを 'window' オブジェクトの 'onresize' イベントにアタッチします。

window.onresize = function() {

「doit」変数に関連付けられた保留中のタイムアウト要求をキャンセルするには、「clearTimeout()」を使用します。

  clearTimeout(doit);

「setTimeout()」の結果を「doit」変数に割り当てます。これにより、100 ミリ秒の遅延後に「resizew()」の実行がスケジュールされます。

  doit = setTimeout(resizedw, 100);
};

サイズ変更操作が終了すると、「resizew()」をすぐにトリガーせずに「onresize」イベント ハンドラーが呼び出されます。 。指定された遅延 (100 ミリ秒) の後、「resizew()」が実行され、サイズ変更プロセスの完了がマークされます。

コード例:

次のコードは、次のコードを示します。このアプローチの実装:

function resizedw() {
  // Your action to be performed when resizing finishes
  console.log('Resizing finished!');
}

var doit = null;
window.onresize = function() {
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

このソリューションは、サイズ変更プロセス中に関連するアクションが実行されないようにすることで、「サイズ変更」イベントを効果的に処理します。代わりに、アクションはサイズ変更操作が完全に完了した後にのみトリガーされます。

以上がサイズ変更操作が完了した後にのみアクションを実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。