Bagaimana untuk Memanggil Acara RESIZE JQuery Hanya Apabila Saiz Semula Selesai?

Menggunakan JQuery untuk Memanggil Acara RESIZE Apabila Saiz Semula Selesai

Apabila membangunkan aplikasi responsif, selalunya perlu menjejaki perubahan saiz tetingkap penyemak imbas untuk melaraskan UI sewajarnya. Walau bagaimanapun, memanggil fungsi ubah saiz secara berterusan semasa tetingkap diubah saiz secara manual boleh menyebabkan panggilan fungsi yang berlebihan.

Untuk menangani isu ini, JQuery menyediakan cara untuk memanggil fungsi ubah saiz hanya sekali selepas tetingkap selesai mengubah saiz.

Penyelesaian Menggunakan setTimeout()

Dalam Pendengar acara ubah saiz JQuery, gunakan fungsi setTimeout() untuk memanggil tindakan yang diingini dengan kelewatan yang ditentukan. Ini memastikan bahawa fungsi hanya dipanggil selepas saiz semula telah dihentikan.

$(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
});

Dalam penyelesaian ini, peristiwa tersuai resizeEnd dicetuskan selepas kelewatan 300ms, menjamin bahawa ia berlaku hanya selepas saiz semula selesai.

Penyelesaian Lain Menggunakan setInterval()

Sebagai alternatif, anda boleh menggunakan setInterval() untuk terus menyemak sama ada saiz tetingkap telah berubah. Apabila saiz kekal stabil untuk tempoh tertentu, fungsi ubah saiz dipanggil.

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

Dalam kedua-dua penyelesaian, nilai kelewatan boleh dilaraskan mengikut keperluan aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk Memanggil Acara RESIZE JQuery Hanya Apabila Saiz Semula Selesai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!