Bagaimana untuk Mencetuskan Fungsi JavaScript Hanya Selepas Pengguna Selesai Menaip?

Cara Melaksanakan Fungsi JavaScript Setelah Selesai Input Pengguna

Untuk melaksanakan fungsi JavaScript hanya apabila pengguna selesai menaip dalam kotak teks, dan bukannya pada setiap ketukan kekunci, adalah penting untuk mengelakkan permintaan AJAX yang berlebihan dan menghalang keperluan untuk kekunci masuk manual menekan.

Penyelesaian menggunakan jQuery

Penyelesaian melibatkan penggunaan pemasa untuk mengesan apabila pengguna telah berhenti menaip untuk tempoh tertentu. Berikut ialah pelaksanaan langkah demi langkah:

1. Tubuhkan pembolehubah pemasa (typingTimer) untuk menjejak masa sejak keluaran kunci terakhir.
2. Tetapkan selang masa yang diingini (doneTypingInterval) dalam yang perlu menunggu selepas keluaran kunci terakhir sebelum melaksanakan fungsi.
3. Pada acara keyup, mulakan pemasa dan kosongkan mana-mana pemasa sebelumnya.
4. Pada acara keydown, kosongkan pemasa untuk menetapkan semula kira detik.
5. Apabila pengguna telah berhenti menaip untuk tempoh yang ditetapkan, kosongkan pemasa dan laksanakan fungsi yang diingini.

// Setup before functions
var typingTimer; // Timer identifier
var doneTypingInterval = 5000; // Time in ms, e.g., 5 seconds
var $input = $('#myInput');

// Start the timer on keyup
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

// Clear the timer on keydown
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

// Execute function after user has finished typing
function doneTyping() {
  // Your desired action
}

Dengan melaksanakan penyelesaian ini, fungsi JavaScript hanya akan dijalankan apabila pengguna selesai menaip dan berhenti seketika untuk tempoh yang ditetapkan, memberikan pengalaman pengguna yang lebih lancar dan cekap untuk operasi AJAX dan tindakan lain yang dicetuskan oleh input teks.

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Fungsi JavaScript Hanya Selepas Pengguna Selesai Menaip?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!