JavaScript/jQueryでウィンドウのサイズ変更後に関数を1回だけ実行する方法は?-jsチュートリアル-php.cn

JavaScript/jQueryでウィンドウのサイズ変更後に関数を1回だけ実行する方法は?

Mary-Kate Olsen

リリース： 2024-11-04 15:58:01

オリジナル

652 人が閲覧しました

How to Execute a Function Only Once After Window Resizing in JavaScript/jQuery?

JavaScript/jQuery でのウィンドウのサイズ変更後の実行の遅延

JavaScript および jQuery の $(window).resize イベントは、ブラウザーの起動時にトリガーされます。ウィンドウのサイズが変更されます。ただし、ウィンドウの端をドラッグして手動でサイズ変更を行うと、この関数が複数回起動されることがよくあります。

1 回限りの呼び出しを実現する:

サイズ変更後に関数を 1 回だけ呼び出すには、完了したら、タイマーを使用して、サイズ変更プロセスが完了するまで実行を遅らせることができます。解決策は次のとおりです:

解決策:

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

ログイン後にコピー

使用法:

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

ログイン後にコピー

このソリューションでは、独自の識別子は、複数のイベント登録を処理するために各コールバックに使用されます。

このアプローチにより、コールバック関数は指定された遅延後に 1 回だけ呼び出されることになり、サイズ変更が完了するのに十分な時間が確保され、冗長なイベントの起動が防止されます。

以上がJavaScript/jQueryでウィンドウのサイズ変更後に関数を1回だけ実行する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。