Latihan 1: Debounce & Throttle — Performance

Latihan 1 dari materi Debounce & Throttle di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Lengkapi function debounce(fn, delay) supaya mengembalikan function baru (pembungkus) yang menunda fn sampai panggilannya berhenti selama delay ms.

Di dalam debounce, buat variabel let timer = null;.
Return sebuah function yang menerima ...args.
Di dalam function itu, panggil clearTimeout(timer) dulu untuk membatalkan jadwal sebelumnya.
Lalu pasang jadwal baru: timer = setTimeout(() => fn.apply(this, args), delay);.

Kode tes di bawahnya (count, inc, dan console.log(count)) biarkan saja. Setelah 150 ms dia mencetak 1 supaya kamu bisa cek sendiri. Baris itu gak dinilai.

Yang dinilai:

Ada function bernama debounce.
Kodemu memakai clearTimeout (di kode, bukan di komentar).
Tiga panggilan beruntun dengan delay 10 ms: setelah 80 ms, fn jalan tepat 1 kali.
Dua panggilan dengan delay 20 ms, dicek langsung setelahnya: fn jalan 0 kali, karena belum boleh jalan sebelum delay lewat.
f('a'), f('b'), tunggu 60 ms, f('c'), tunggu 60 ms lagi: fn jalan 2 kali dan argumen terakhirnya 'c', jadi hasil ceknya "2|c".

Hint

Debounce menunggu sampai panggilan berhenti: tiap panggilan baru membatalkan jadwal yang lama, jadi cuma panggilan terakhir yang jalan.
Simpan nomor jadwal di variabel timer di dalam debounce, di luar function yang di-return. Function yang di-return memanggil clearTimeout(timer), lalu memasang setTimeout baru dan menyimpannya di timer.
let timer = null; return function (...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); };

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Debounce & Throttle — Performance

Hint

Memperbarui Aplikasi