Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menambah Kelewatan Menaip pada Pengendali jQuery .keyup()?

Bagaimana untuk Menambah Kelewatan Menaip pada Pengendali jQuery .keyup()?

Barbara Streisand
Lepaskan: 2024-12-07 08:10:13
asal
628 orang telah melayarinya

How to Add a Typing Delay to a jQuery .keyup() Handler?

Cara Melaksanakan Kelewatan Menaip dalam Pengendali .keyup()

Apabila bekerja dengan medan carian yang mencetuskan tindakan setiap kali kunci ditekan, ia boleh memberi manfaat untuk melaksanakan kelewatan untuk mengurangkan pertanyaan yang tidak perlu. Artikel ini meneroka cara untuk mencapai kelewatan ini, memastikan pertanyaan hanya dilaksanakan selepas jeda dalam menaip.

Pengendali .keyup() tidak menawarkan pilihan sedia ada untuk memperkenalkan kelewatan. Walau bagaimanapun, fungsi tersuai boleh digunakan untuk mencapai tingkah laku ini. Satu pendekatan biasa ialah menggunakan fungsi setTimeout().

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);
  };
}
Salin selepas log masuk

Fungsi ini mengambil dua parameter: panggil balik (fungsi untuk dilaksanakan selepas kelewatan) dan ms (tempoh kelewatan dalam milisaat).

Untuk menggunakan fungsi ini dengan pengendali .keyup():

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));
Salin selepas log masuk

Dalam contoh ini, peristiwa .keyup() medan 'input' mencetuskan fungsi kelewatan, yang menunggu selama 500 milisaat selepas setiap kekunci ditekan. Hanya apabila pengguna berhenti menaip selama setengah saat barulah panggilan balik dilaksanakan, mengelog nilai semasa medan input.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Kelewatan Menaip pada Pengendali jQuery .keyup()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan