Bagaimana untuk Mencegah Berbilang Saiz Peristiwa dalam JavaScript/jQuery?

Menghalang Peristiwa Ubah Saiz Berbilang dalam JavaScript/jQuery

Apabila menggunakan $(window).resize, anda mungkin menghadapi beberapa kali penembakan acara semasa saiz semula tetingkap manual. Untuk menyelesaikan isu ini dan memastikan bahawa fungsi dipanggil sekali sahaja selepas saiz semula selesai, pertimbangkan penyelesaian berikut:

Pelaksanaan Menggunakan waitForFinalEvent

Versi penyelesaian yang diubah suai daripada CMS membenarkan berbilang invocation di bahagian berlainan kod anda:

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

Contoh Penggunaan

Sepadukan fungsi waitForFinalEvent ke dalam kod anda seperti berikut:

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

Ini memastikan bahawa apabila saiz tetingkap diubah suai selesai, fungsi panggil balik yang dinyatakan dalam waitForFinalEvent akan dilaksanakan dengan kelewatan 500 milisaat. Parameter ID unik menghalang konflik apabila menggunakan berbilang panggilan balik untuk saiz semula tetingkap.

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