Bagaimana untuk Melaksanakan Tindakan Hanya Selepas Operasi Ubah Saiz Telah Selesai?

Menunggu 'Tamat' Acara 'ubah saiz' untuk Pelaksanaan Tindakan Optimum

Dalam pengaturcaraan dipacu acara, adalah perkara biasa untuk mengendalikan saiz perubahan menggunakan acara 'saiz semula', biasanya diberikan kepada tetingkap atau elemen lain yang boleh diubah saiz. Walau bagaimanapun, apabila operasi mengubah saiz berlaku, peristiwa 'ubah saiz' dicetuskan beberapa kali semasa proses, membawa kepada pelaksanaan berlebihan pengendali acara anda.

Merakam 'Tamat' Acara 'ubah saiz'

Untuk menangani isu ini dan melaksanakan tindakan hanya apabila saiz semula telah selesai, kami boleh menggunakan teknik yang melibatkan penggunaan 'setTimeout()' dan 'clearTimeout()'.

Penyelesaian:

Buat fungsi, 'resizedw()', yang akan berfungsi sebagai pengendali acara anda untuk tindakan mengubah saiz.

function resizedw() {
  // Your action to be performed when resizing finishes
}

Isytiharkan pembolehubah, 'doit', dan mulakannya sebagai 'null'. Pembolehubah ini akan menahan id tamat masa yang dikembalikan oleh 'setTimeout()'.

var doit = null;

Lampirkan pendengar acara pada acara 'onresize' objek 'window'.

window.onresize = function() {

Gunakan 'clearTimeout()' untuk membatalkan sebarang permintaan tamat masa belum selesai yang dikaitkan dengan pembolehubah 'doit'.

  clearTimeout(doit);

Tugaskan hasil 'setTimeout()' kepada pembolehubah 'doit'. Ini akan menjadualkan pelaksanaan 'resizedw()' selepas kelewatan selama 100 milisaat.

  doit = setTimeout(resizedw, 100);
};

Apabila operasi saiz semula tamat, pengendali acara 'onresize' akan digunakan tanpa mencetuskan 'resizedw()' serta-merta . Selepas kelewatan yang ditetapkan (100 milisaat), 'resizedw()' akan dilaksanakan, menandakan selesainya proses saiz semula.

Contoh Kod:

Kod berikut menunjukkan pelaksanaan pendekatan ini:

function resizedw() {
  // Your action to be performed when resizing finishes
  console.log('Resizing finished!');
}

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

Penyelesaian ini mengendalikan acara 'saiz semula' dengan berkesan dengan menghalang tindakan yang berkaitan daripada dilaksanakan semasa proses mengubah saiz. Sebaliknya, tindakan dicetuskan hanya selepas operasi saiz semula selesai sepenuhnya.

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