JavaScript/jQuery でウィンドウのサイズ変更イベントを正確に検出するにはどうすればよいですか?

JavaScript/jQuery での正確なウィンドウ サイズ変更イベントの検出

$(window).resize を使用してウィンドウ サイズの変更を監視する場合、一般的に次のことが行われます。手動によるサイズ変更中に複数のイベントが発生します。サイズ変更が完了した後でのみコードを実行する必要がある場合、これは問題となる可能性があります。

解決策:

この問題に対処するには、waitForFinalEvent 関数を利用できます。

<code class="javascript">var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();</code>

この関数は、最後のサイズ変更イベント後の指定された遅延 (デフォルトでは 500 ミリ秒) の後にのみコールバックが実行されるようにします。 uniqueId パラメータを使用すると、競合することなく複数のコールバックを使用できます。

使用法:

この関数を利用するには、コードを次のように変更できます:

<code class="javascript">
$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});</code>

このソリューションを実装することで、コードがウィンドウ サイズ変更イベントに正確に応答し、サイズ変更が完了した後にのみ実行されるようにすることができます。

以上がJavaScript/jQuery でウィンドウのサイズ変更イベントを正確に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。