Bagaimana untuk Mencegah Pelbagai 'saiz semula' Pencetus Peristiwa dalam JavaScript?

Menguruskan Berbilang Pencetusan 'saiz semula' Acara

Pembangun sering menghadapi isu mengendalikan berbilang pencetus peristiwa 'saiz semula' semasa proses mengubah saiz. Ini boleh membawa kepada tingkah laku yang tidak diingini atau ketidakcekapan. Memahami cara menunggu 'tamat' acara 'ubah saiz' adalah penting untuk memastikan hanya tindakan yang diingini dilaksanakan sekali.

Satu pendekatan biasa, seperti yang ditunjukkan dalam sampel kod yang diberikan, adalah menggunakan $ (tetingkap).resize(function(){resizedw();}) kaedah. Walau bagaimanapun, kaedah ini mencetuskan fungsi resizedw() beberapa kali semasa proses mengubah saiz yang sedang dijalankan.

Untuk mengatasinya, kita boleh memanfaatkan kaedah setTimeout() dan clearTimeout(). Strategi ini membolehkan kami menetapkan kelewatan sebelum mencetuskan fungsi resizedw(). Dengan menetapkan tamat masa, sebagai contoh, 100ms, kita boleh menunggu jumlah masa tertentu untuk memastikan saiz semula telah selesai. Semasa kelewatan ini, sebarang peristiwa ubah saiz baharu akan 'menetapkan semula' pemasa, menjamin bahawa ia hanya dilaksanakan sebaik sahaja proses mengubah saiz benar-benar selesai.

Berikut ialah contoh kod untuk menggambarkan pendekatan ini:

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Sampel kod ini boleh didapati di jsfiddle untuk kemudahan anda.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pelbagai 'saiz semula' Pencetus Peristiwa dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!