サイズ変更イベントの完了後にのみアクションをトリガーするにはどうすればよいですか?

「サイズ変更」イベントの終了を待ってアクションをトリガーします

レスポンシブ デザインを使用する場合、多くの場合、サイズ変更プロセスが完全に終了した後にのみアクションを実行してください。ただし、$(window).resize() を使用した従来のイベント処理では、サイズ変更プロセス中に複数の呼び出しがトリガーされ、望ましくない動作が発生する可能性があります。

解決策: setTimeout() と clearTimeout() を使用する

目的の動作を実現するには、setTimeout() と clearTimeout() を組み合わせて使用​​できます。以下に例を示します。

function resizedw() {
  // Haven't resized in 100ms!
}

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

このアプローチでは、タイマーを利用して resizew() 関数の実行を遅らせます。サイズ変更イベントが発生すると、既存のタイマーがクリアされ、新しいタイマーが開始されます。サイズ変更プロセスが 100 ミリ秒以内に続く場合、タイマーは再びリセットされます。サイズ変更が 100 ミリ秒停止した場合にのみ、resizew() 関数が呼び出されます。

jsfiddle の例:

このソリューションの実際の例については、を参照してください。回答に記載されている jsfiddle リンクにアクセスしてください。

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