Bagaimana untuk Mencetuskan Tindakan Hanya Selepas Acara Ubah Saiz Selesai?

Menunggu Penghujung Acara 'Ubah Saiz' untuk Mencetuskan Tindakan

Selalunya apabila bekerja dengan reka bentuk responsif, adalah wajar untuk melakukan tindakan hanya selepas proses saiz semula telah selesai sepenuhnya. Walau bagaimanapun, pengendalian acara tradisional menggunakan $(window).resize() boleh mencetuskan berbilang panggilan semasa proses mengubah saiz, membawa kepada tingkah laku yang tidak diingini.

Penyelesaian: Menggunakan setTimeout() dan clearTimeout()

Untuk mencapai tingkah laku yang diingini, gabungan setTimeout() dan clearTimeout() boleh digunakan. Berikut ialah contoh:

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

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

Pendekatan ini menggunakan pemasa untuk menangguhkan pelaksanaan fungsi resizedw(). Apabila peristiwa ubah saiz berlaku, ia mengosongkan mana-mana pemasa sedia ada dan memulakan yang baharu. Jika proses mengubah saiz berterusan dalam masa 100 milisaat, pemasa ditetapkan semula. Hanya apabila saiz semula telah berhenti selama 100 milisaat barulah fungsi resizedw() digunakan.

Contoh pada jsfiddle:

Untuk contoh penyelesaian ini yang berfungsi, sila rujuk ke pautan jsfiddle yang disediakan dalam jawapan.

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Tindakan Hanya Selepas Acara Ubah Saiz Selesai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!