Debounce & Throttle

·

2 min read

Debounce

Please check the example below.

Scroll the screen and stop for some time. While doing that, check the box whether something is written in it.

You can notice something is written when you do not scroll for some time. This is debouncing.

If events do not occur for some time, then the callback is called.

The example of programs that uses this technology is a 'search engine'. While someone is typing something in full swing, the client-side does not request for the data. After the person finished typing, then the client-side request for the data.

Throttle

Please check the example below.

Scroll the screen for a long time and check the box whether something is written in it.

You can notice something is written seldomly although you scroll continuously. This is throttling.

Even though events occur continuously, which means occurring in short period of time repetitively, the callback is called seldomly.

The reason to do this is to give less burden to the computers.

Of course, it gives bad user experience because things do not move smoothly.

The example of programs that use this technology is a 'game'. If there is a lot of burden to computers, it occurs so that the computers can be cooled.

Appendix

Usually, people call what 'setTimeout()' returns as 'timerId'. Using 'timerId' we can do things such as cancelling the callback using 'clearTimeout(timerId)'. But I used other terms such as 'timerStatus' or 'doingAfterTimer' for the content to be understood more easily.