Bagaimana untuk Mencegah Berbilang $(window).resize Event Firings?

Mengatasi Peristiwa Ubah Saiz Berbilang dengan $(window).resize

Dalam pembangunan web, memanipulasi saiz tetingkap penyemak imbas menggunakan acara $(window).resize boleh mencetuskan tembakan berganda. Untuk menangani perkara ini, kami meneroka penyelesaian yang melaksanakan fungsi hanya selepas operasi ubah saiz selesai.

Penyelesaian:

Untuk memanggil fungsi selepas mengubah saiz tetingkap penyemak imbas ialah selesai, kita boleh menggunakan fungsi waitForFinalEvent. Fungsi ini mengambil fungsi panggil balik, kelewatan milisaat dan pengecam unik sebagai argumen. Fungsi ini menetapkan tamat masa untuk panggilan balik berdasarkan kelewatan, tetapi ia juga menyemak sama ada tamat masa sebelumnya dengan ID unik yang sama wujud. Jika ya, ia membatalkan tamat masa sebelumnya dan menetapkan yang baharu.

Pelaksanaan:

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

Penggunaan:

Laksanakan fungsi waitForFinalEvent dalam kod anda seperti berikut:

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

Dengan menyediakan ID unik untuk setiap panggilan balik, pelaksanaan ini memastikan panggilan balik yang berasingan tidak mengganggu acara tamat masa satu sama lain. Oleh itu, fungsi hanya akan dilaksanakan selepas operasi ubah saiz selesai, menghalang tembakan berganda.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Berbilang $(window).resize Event Firings?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!