Bagaimana untuk Melaksanakan Fungsi Hanya Sekali Selepas Saiz Tetingkap dalam JavaScript/jQuery?

Pelaksanaan Tertunda selepas Mengubah Saiz Tetingkap dalam JavaScript/jQuery

Peristiwa $(window).resize dalam JavaScript dan jQuery dicetuskan apabila penyemak imbas mengubah saiz tetingkap. Walau bagaimanapun, ia sering menyala berbilang kali semasa mengubah saiz manual dengan menyeret tepi tetingkap.

Mencapai Seruan Satu Masa:

Untuk memanggil fungsi sekali sahaja selepas saiz semula adalah selesai, pemasa boleh digunakan untuk menangguhkan pelaksanaan sehingga proses saiz semula selesai. Berikut ialah penyelesaian:

Penyelesaian:

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

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

Dalam penyelesaian ini, satu pengecam digunakan untuk setiap panggilan balik untuk mengendalikan berbilang pendaftaran acara.

Pendekatan ini memastikan bahawa fungsi panggil balik dipanggil sekali sahaja, selepas kelewatan yang ditentukan, memberikan masa yang cukup untuk mengubah saiz selesai dan menghalang penembakan acara berlebihan.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Fungsi Hanya Sekali Selepas Saiz Tetingkap dalam JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!