Cara Membuat Acara Satu Masa di JavaScript

Banyak tugas JavaScript memerlukan peristiwa yang hanya berlaku sekali. Fikirkan gambar kecil yang memuat video pada klik pertama, atau butang "lebih" mengambil kandungan tambahan melalui Ajax. Berulang kali mencetuskan pengendali acara yang sama tidak cekap dan boleh menyebabkan tingkah laku yang tidak dijangka (mis., Pemuatan data yang berlebihan). Nasib baik, mewujudkan pengendali acara tunggal dalam JavaScript adalah mudah. Proses biasanya melibatkan:

1. melampirkan pengendali: Pengendali acara (fungsi) ditugaskan ke acara (seperti klik).
2. pelaksanaan pengendali: pengendali berjalan ketika peristiwa berlaku.
3. penyingkiran pengendali: Pengendali kemudiannya terpisah, menghalang pelaksanaan selanjutnya pada peristiwa berikutnya.

Menggunakan kaedah JQuery's one()

Jika anda menggunakan jQuery, penyelesaian yang paling mudah ialah kaedah

: one()

$("#myelement").one("click", function() {
  alert("This message appears only once!");
});

Ini berfungsi seperti kaedah acara jQuery yang lain. Untuk dokumentasi terperinci, lihat JQuery API:

https://www.php.cn/link/55E71B4408E917B9C7BBBB0DF7D0B81AF4 . pengendali diri (javascript)

Dalam JavaScript biasa, fungsi pengendali mana -mana boleh mengeluarkannya:

Baris

menghilangkan pengendali selepas penyerahan pertama. Ini berfungsi tanpa mengira nama atau jenis acara pengendali. Perhatikan bahawa

document.getElementById("myelement").addEventListener("click", handler);

function handler(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  alert("This message appears only once!");
}

tidak disokong dalam mod ketat; Dalam JavaScript moden, anda mungkin menggunakan fungsi yang dinamakan dan merujuknya secara langsung. Untuk versi IE yang lebih tua, anda perlu

dan awalan "on" (mis., "Onclick"). e.target.removeEventListener(e.type, arguments.callee); arguments.callee detachEvent fungsi acara satu kali yang boleh diguna semula

Untuk mengelakkan berulang kali menulis kod penyingkiran, buat fungsi yang boleh diguna semula:

Penggunaan:

function oneTimeEvent(node, type, callback) {
  node.addEventListener(type, function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    callback(e);
  });
}

pilihan moden JavaScript

oneTimeEvent(document.getElementById("myelement"), "click", function(e) {
  alert("This message appears only once!");
});

once Pendekatan yang paling moden dan boleh dibersihkan menggunakan pilihan dalam

:

once: true addEventListener Ini disokong oleh pelayar yang paling moden dan mengelakkan keperluan untuk penyingkiran manual.

document.getElementById("myelement").addEventListener("click", function() {
  console.log("This will only run once!");
}, { once: true });

Walaupun tidak semestinya perlu, memahami teknik-teknik ini untuk mewujudkan pengendali acara tunggal menggunakan fleksibiliti dan kecekapan yang berharga dalam projek JavaScript anda. Pilih kaedah yang paling sesuai untuk kebergantungan dan gaya pengekodan projek anda.

Atas ialah kandungan terperinci Cara Membuat Acara Satu Masa di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!