Tips JavaScript : Throttle & Debounce

Apa itu throttle & debounce ? Berikut ini penjelasan singkat & contohnya.

Dua-duanya dipake untuk optimasi, khususnya untuk fungsi-fungsi kompleks yang dijalanin berulang kali. Cuman cara & metodenya yang beda.

Throttle

Throttle: Memastikan sebuah function hanya dijalankan satu kali dalam satu rentang waktu.

Dalam contoh di bawah ini, saya bikin dua listener untuk event scroll. Yang satu normal, ga pake throttle.

See the Pen Throttle by Anggie Bratadinata (@masputih) on CodePen.

Sambil scrolling coba perhatiin, nilai scrollY di dua listener itu sama, tapi listener yang ga pake throttle lebih sering dijalanin (call count-nya lebih banyak).

Debounce

Debounce: Menunda eksekusi berulang sebuah function & tunggu sampai ada kondisi idle selama beberapa saat.

Bingung? Analoginya begini:

Anda mau pake lift. Pintu kebuka, Anda masuk. Setelah beberapa detik pintu mulai nutup, tapi ada orang lain yang mau masuk juga. Pintu kebuka lagi. Liftnya nggak jadi naik, tapi nunggu sampe orang itu masuk & pintunya nutup. Pas pintu mau nutup ada orang lagi yang mau masuk. Liftnya ga jadi naik lagi. Terus begitu sampe ga ada orang masuk & pintu nutup. Jadi si lift ini menunda naik untuk menghemat waktu & daya. Penundaan ini disebut Debounce.

See the Pen Contoh Debounce by Anggie Bratadinata (@masputih) on CodePen.

Perhatiin, listener yang pake debounce baru dijalanin kalo kita berhenti scroll selama 0.5 detik.

Kapan pakenya?

Throttle & Debounce sama-sama dipake dalam kasus di mana kita hanya perlu tau hasil akhir / sebagian hasil sebuah proses. Jadi kita ga terlalu peduli tentang detilnya. Akurasi ga terlalu penting.

Kita bisa pake throttle untuk bikin fitur infinite scroll kaya FB, Twitter, dll.

Debounce bisa kita pake untuk pemrosesan input teks pake AJAX. Misalnya, untuk bikin fitur mirip search-suggestion-nya Google kita kirim query ke server pas user berenti ngetik sekian milidetik.

Sekian. Mudah-mudahan bermanfaat.

Also in this category ...


Leave a Reply

Your email address will not be published. Required fields are marked *