Bagaimana untuk Mengesan Peristiwa Ubah Saiz Tetingkap yang Tepat dalam JavaScript/jQuery?

Mengesan Peristiwa Ubah Saiz Tetingkap Tepat dalam JavaScript/jQuery

Apabila menggunakan $(window).resize untuk memantau perubahan saiz tetingkap, adalah perkara biasa untuk menghadapi berbilang peristiwa penembakan semasa saiz semula manual. Ini boleh menjadi masalah apabila anda perlu melaksanakan kod hanya selepas saiz semula selesai.

Penyelesaian:

Untuk menangani isu ini, kami boleh menggunakan fungsi waitForFinalEvent:

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

Fungsi ini memastikan bahawa panggilan balik hanya dilaksanakan selepas kelewatan yang ditentukan (500ms secara lalai) berikutan peristiwa ubah saiz terakhir. Parameter uniqueId membenarkan penggunaan berbilang panggilan balik tanpa konflik.

Penggunaan:

Untuk menggunakan fungsi ini, anda boleh mengubah suai kod anda seperti berikut:

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

Dengan melaksanakan penyelesaian ini, anda boleh memastikan bahawa kod anda bertindak balas dengan tepat kepada peristiwa mengubah saiz tetingkap, hanya dilaksanakan selepas saiz semula telah selesai.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Peristiwa Ubah Saiz Tetingkap yang Tepat dalam JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!