Debounce Bel Pintu: Belajar debounce dan throttle di JavaScript

Cara bermain Debounce Bel Pintu

1. Baca instruksi level. Di bawah editor tertulis cara game memasang fungsimu, mis. pintu.bel = debounce(bunyi, 300);.
2. Tulis fungsi peredamnya di editor. setTimeout, clearTimeout, dan Date.now() memakai jam virtual, jadi tidak ada yang perlu ditunggu.
3. Game memutar rangkaian tekanan level ke pintu.bel. Garis waktu diperbarui setiap kamu mengetik: titik hitam untuk tekanan, pita untuk timer (oranye berbunyi, abu dihapus), titik hijau atau merah untuk panggilanmu, dan lingkaran hijau untuk target.
4. Tabel di bawahnya membandingkan tiap panggilan: waktu, argumen, dan mulai level 4 juga this.
5. Tekan Cek jawaban atau Ctrl + Enter. Yang dicek adalah jadwal panggilan fungsi asli, bukan teks kodemu, jadi cara lain yang hasilnya sama juga benar.
6. Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
7. Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.

Yang kamu pelajari

1. Level 1

   Menunda dengan setTimeout

   Fungsi pembungkus yang menjadwalkan fn jalan ms milidetik kemudian, bukan seketika.

2. Level 2

   Debounce

   Tiap panggilan membatalkan timer sebelumnya dengan clearTimeout, jadi fn hanya jalan setelah rentetan berhenti selama ms.

3. Level 3

   Argumen terakhir

   Rest parameter ...args menangkap argumen tiap panggilan, dan timer memakai milik panggilan terakhir.

4. Level 4

   Meneruskan this

   Kembalikan function biasa, bukan arrow function, lalu jalankan fn.apply(this, args) supaya method tetap tahu objeknya.

5. Level 5

   Membatalkan dengan cancel

   Fungsi juga objek, jadi bisa diberi method cancel yang menghapus timer yang masih menunggu.

6. Level 6

   Opsi leading

   Debounce yang jalan di panggilan pertama, lalu diam sampai rentetan berhenti.

7. Level 7

   Throttle

   Paling sering sekali tiap ms, dihitung dari kapan fn terakhir jalan, meski panggilan terus datang.

8. Level 8

   Memilih debounce atau throttle

   Pencarian menunggu pengguna selesai mengetik, scroll butuh pembaruan berkala, dan tombol bayar butuh debounce leading.

Debounce menunggu jeda, throttle membagi jatah

Debounce dengan 300 ms menunggu sampai tidak ada panggilan selama 300 ms. Selama panggilan terus datang lebih rapat dari itu, fn tidak pernah jalan. Cocok untuk kotak pencarian: yang penting kata terakhir, bukan tiap huruf.

Throttle dengan 200 ms menjalankan fn paling sering sekali tiap 200 ms, berapa pun panggilan yang datang. Cocok untuk scroll atau resize yang butuh pembaruan berkala selama pengguna masih bergerak. Kalau ragu, tanyakan: apakah kamu butuh hasil akhirnya saja (debounce), atau butuh pembaruan selama prosesnya (throttle)?

Tanya jawab