複数の $(window).resize イベントの発生を防ぐ方法は?

$(window).resize を使用して複数のサイズ変更イベントの起動に対処する

Web 開発では、$(window).resize イベントを使用してブラウザのウィンドウ サイズを操作すると、トリガーされる可能性があります複数発砲。これに対処するために、サイズ変更操作の完了後にのみ関数を実行するソリューションを検討します。

解決策:

ブラウザ ウィンドウのサイズ変更後に関数を呼び出すには、次のようにします。完了したら、waitForFinalEvent 関数を利用できます。この関数は、コールバック関数、ミリ秒の遅延、および一意の識別子を引数として受け取ります。この関数は遅延に基づいてコールバックのタイムアウトを設定しますが、同じ一意の ID を持つ以前のタイムアウトが存在するかどうかもチェックします。存在する場合、以前のタイムアウトがキャンセルされ、新しいタイムアウトが設定されます。

実装:

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

使用法:

コードに waitForFinalEvent 関数を次のように実装します。

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

この実装では、各コールバックに一意の ID を提供することで、個別のコールバックが互いのタイムアウト イベントに干渉しないようにします。したがって、この関数はサイズ変更操作が完了した後にのみ実行され、複数回の起動を防ぎます。

以上が複数の $(window).resize イベントの発生を防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。