Rumah > hujung hadapan web > tutorial js > Bagaimana Mengendalikan Ubah Saiz Acara dengan Cekap dengan Pengendalian Acara Tertunda?

Bagaimana Mengendalikan Ubah Saiz Acara dengan Cekap dengan Pengendalian Acara Tertunda?

Mary-Kate Olsen
Lepaskan: 2024-11-06 20:48:02
asal
323 orang telah melayarinya

How to Handle Resize Events Efficiently with Delayed Event Handling?

Pengendalian Acara Tertunda untuk Acara Ubah Saiz

Apabila mengendalikan acara ubah saiz dalam JavaScript, adalah perkara biasa untuk menghadapi berbilang panggilan semasa proses mengubah saiz. Ini boleh membawa kepada isu prestasi atau tingkah laku yang tidak diingini. Untuk menangani perkara ini, pertimbangkan untuk menggunakan pendekatan pengendalian acara tertunda.

Menggunakan setTimeout() dan clearTimeout()

Satu penyelesaian yang berkesan ialah menggunakan setTimeout() dan clearTimeout () fungsi. Begini caranya:

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

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

Dalam penyelesaian ini:

  • Fungsi resizedw digunakan hanya selepas tiada peristiwa ubah saiz untuk kelewatan yang ditentukan (dalam kes ini, 100 milisaat).
  • clearTimeout() digunakan untuk membatalkan sebarang seruan resizedw belum selesai yang dicetuskan oleh peristiwa ubah saiz sebelumnya.
  • setTimeout() menjadualkan seruan resizedw baharu selepas kelewatan, memastikan ia berlaku sekali sahaja selepas acara ubah saiz terakhir.

Pendekatan ini membolehkan anda menangguhkan tindakan sehingga tamat acara ubah saiz, menghalang berbilang pelaksanaan.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Ubah Saiz Acara dengan Cekap dengan Pengendalian Acara Tertunda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan