ウィンドウのサイズ変更が完了した後に $(window).resize() を 1 回だけ実行する方法

対象イベントの完了: $(window).resize() 実行後

$(window).resize(function() { ... }) を利用する場合ブラウザウィンドウのサイズ変更を監視する場合、手動ウィンドウ調整中に複数のイベントが発生する可能性があります。この問題は、ウィンドウの境界線がドラッグされるたびにイベントがトリガーされ、望ましくない動作が発生するために発生します。これに対処するために、サイズ変更プロセスが完了した後にのみ実行が行われるようにするソリューションを検討してみましょう。

以下のコード スニペットは、コードのさまざまな部分で利用できる実用的なソリューションを提供します。

<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>

このソリューションを利用するには、次の手順に従います:

1. ウィンドウのカスタム イベント リスナーを実装するサイズ変更。

<code class="javascript">$(window).resize(function () {</code>

2. イベント リスナー内で、waitForFinalEvent を呼び出して、コールバックのタイムアウトを設定します。

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

500 パラメーターは遅延を表します。 500 ミリ秒なので、サイズ変更プロセスが完了するのに十分な時間がかかります。 uniqueId パラメータにより、複数のコールバックが干渉することなく同じタイムアウト メカニズムを利用できるようになります。

この修正されたソリューションにより、ウィンドウのサイズ変更が完了した後に実行される複数のコールバックを定義でき、コードのさまざまなセクションに効果的に対応できます。

以上がウィンドウのサイズ変更が完了した後に $(window).resize() を 1 回だけ実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。