jQuery の「resize」イベント関数をサイズ変更後に 1 回だけ実行するにはどうすればよいですか?

サイズ変更後に jQuery RESIZE イベントを 1 回だけ呼び出す

jQuery のサイズ変更イベント関数を使用する場合、この関数が必要な状況に遭遇することがあります。ブラウザのサイズ変更が終了したときに 1 回だけ実行します。ただし、デフォルトの動作では、サイズ変更プロセス中に関数が継続的に呼び出されます。

これを克服するには、「デバウンス」と呼ばれる手法を利用できます。仕組みは次のとおりです:

1. 間隔を設定します:
   setInterval() を使用して時間指定関数を開始し、ブラウザーがまだサイズ変更中かどうかを確認します。 50 ～ 100 ミリ秒などの適切な間隔を設定します。
2. クリア間隔:
   ブラウザのサイズ変更が行われなくなった場合 (例: ユーザーがウィンドウの端のドラッグを停止した場合)、 clearInterval() を使用して、手順 1 で作成した間隔をクリアします。これにより、関数が 1 回だけ呼び出されることが保証されます。
3. デバウンスの実装:
   setInterval() 関数内で、ブラウザがまだサイズ変更中かどうかを確認するチェックを実行します。例として次のコードを使用します。

$(window).resize(() => {
  let timer;
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    // Your code to execute after resizing is complete
  }, 50);  // Adjust the delay as per your requirement
});

4. デバウンス関数の初期化:
   サイズ変更イベント リスナーを設定した直後にデバウンス関数を呼び出して、デバウンス関数をトリガーします。 。これにより、ページの読み込み時に関数が 1 回実行されることが保証されます。

この手法を実装すると、ブラウザのサイズ変更が完了した後にサイズ変更イベント関数を 1 回呼び出すことができ、連続関数の問題を効果的に解決できます。サイズ変更プロセス中に呼び出します。

以上がjQuery の「resize」イベント関数をサイズ変更後に 1 回だけ実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。