Debounce Carian

25 minitPertengahanJavaScript

Sekarang setiap ketukan kekunci menjalankan carian. Taip nasi dan renderResults berjalan empat kali (n, na, nas, nasi). Jika setiap carian ialah request ke server, itu tiga request sia-sia bagi setiap perkataan. Buka console dan lihat sendiri.

Debounce menyelesaikan masalah ini: tunggu sehingga pengguna berhenti seketika, kemudian jalankan sekali dengan nilai akhir.

JavaScript

const log = debounce((x) => console.log(x), 300);
log("a"); log("b"); log("c");
// ...300 ms of silence...
// logs "c" once

Bagaimana debounce sepatutnya berkelakuan

Keperluan

debounce(fn, delay) memulangkan function baharu. Setiap panggilan memulakan semula pemasa; fn berjalan sekali, delay ms selepas panggilan terakhir, dengan argumen panggilan terakhir.
Panggilan yang jaraknya lebih daripada delay masing-masing menjalankan fn secara berasingan.
Sambungkan kotak carian dengan debounce 300 ms. Jangan ubah renderResults.

Lengkapkan debounce(fn, delay) dan gunakannya supaya kotak carian memanggil renderResults sekali sahaja, 300 ms selepas pengguna berhenti menaip, dengan teks terkini.

Semakan

Berjalan sekali, selepas panggilan terakhir, dengan argumen terakhir
Jeda berasingan berjalan berasingan, dengan semua argumen
Kotak carian menunggu sehingga menaip berhenti

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.