サイズ変更が完了したときにのみ JQuery の RESIZE イベントを呼び出す方法は?

サイズ変更完了時に JQuery を使用して RESIZE イベントを呼び出す

レスポンシブなアプリケーションを開発する場合、多くの場合、ブラウザーのウィンドウ サイズの変更を追跡して調整する必要があります。それに応じたUI。ただし、ウィンドウのサイズを手動で変更しているときにサイズ変更関数を呼び出し続けると、過剰な関数呼び出しが発生する可能性があります。

この問題に対処するために、JQuery では、ウィンドウのサイズ変更が終了した後にサイズ変更関数を 1 回だけ呼び出す方法が提供されています。

setTimeout() を使用した解決策

JQuery のサイズ変更イベント リスナーでは、 setTimeout() 関数を使用して、指定した遅延で目的のアクションを呼び出します。これにより、関数はサイズ変更が停止した後にのみ呼び出されることが保証されます。

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 300);
});

$(window).on('resizeEnd', function() {
  // Code to be executed after resizing is complete
});

このソリューションでは、resizeEnd カスタム イベントは 300 ミリ秒の遅延後にトリガーされ、サイズ変更が終了した後にのみ発生することが保証されます。

を使用したその他の解決策setInterval()

または、setInterval() を使用して、ウィンドウ サイズが変更されたかどうかを継続的に確認することもできます。指定された期間にわたってサイズが安定している場合、サイズ変更関数が呼び出されます。

var resizeInterval;
window.onresize = function() {
  if (resizeInterval) clearInterval(resizeInterval);
  resizeInterval = setInterval(function() {
    if (window.innerWidth == previousWidth && window.innerHeight == previousHeight) {
      clearInterval(resizeInterval);
      // Code to be executed after resizing is complete
    }
  }, 300);
  previousWidth = window.innerWidth;
  previousHeight = window.innerHeight;
};

どちらのソリューションでも、アプリケーションの要件に応じて遅延値を調整できます。

以上がサイズ変更が完了したときにのみ JQuery の RESIZE イベントを呼び出す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。