Bagaimanakah Saya Boleh Melambatkan Pengendali Acara Keyup untuk Mencegah Tindakan Berlebihan Semasa Menaip Pengguna?

Melengahkan Pengendali Acara Kekunci untuk Pemberhentian Menaip Pengguna

Dalam antara muka pengguna interaktif, selalunya wajar untuk melaksanakan tindakan hanya selepas pengguna selesai memasukkan data. Pertimbangkan medan carian yang melaksanakan pertanyaan AJAX pada setiap kekunci. Secara lalai, ini akan menghasilkan banyak permintaan carian untuk rentetan input yang terpendek sekalipun.

Untuk mengelakkan pertanyaan yang berlebihan ini dan meningkatkan pengalaman pengguna, kami boleh melaksanakan mekanisme kelewatan yang hanya melakukan tindakan selepas tempoh tertentu tidak aktif. Walaupun fungsi kekunci asli tidak mempunyai fungsi kelewatan terbina dalam, kami boleh mencapai matlamat kami menggunakan fungsi mudah yang dipanggil kelewatan.

Fungsi kelewatan mengambil dua hujah:

• panggilan balik : Fungsi untuk dilaksanakan selepas tempoh kelewatan.
• ms: The tempoh kelewatan dalam milisaat (pilihan; lalai kepada 0).

Fungsi kelewatan pada asasnya mencipta pendikit, menghalang panggilan balik daripada dipanggil terlalu kerap. Berikut ialah contoh pelaksanaan:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}

Untuk menggunakan kelewatan ini pada medan carian anda, anda boleh menggunakannya seperti berikut:

$('#input').keyup(delay(function (e) {
  // Perform your search logic here
}, 500));

Di sini, logik carian hanya akan dilaksanakan 500 milisaat selepas acara keyup terakhir, memberikan pengalaman yang lebih mesra pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melambatkan Pengendali Acara Keyup untuk Mencegah Tindakan Berlebihan Semasa Menaip Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!