Rapid Tutorial 1

Throttle and Debounce are two important functions that is required which will optimize your code when you are doing some performance intense tasks.

Problem: Lets say you want to manipulate the dom on window resize or on scrolling or do some task which you personally think its a overkill. But you need to implement it because of some requirements.

First thing you need to understand is Resize, Scroll, Keypress are types of events which fire continuously like a machine gun.

Resize / Scroll Event --------------------------------------------------------------

So, if you are writing any handler for these events, then you have to write it in such a way , so its making minimum dom manipulaion, runs fast, optimized and use less memory.
Sometimes requirements are like that, which will make you to write more code in these handlers.

In order to handle these kind of situations. Developers came with the idea of using the window object api, setTimeout. Born from some experiments was Throttle and Debounce.

Throttle is used to execute a piece of code in a fixed interval when performing resize or scroll.

Example: Supposedly say you have given 100ms as a interval in the throttle function, then the function will be triggered only once in 100ms

Debounce on the other hand is used to execute a piece of code once after the defined interval.

Example: Supposedly say you have given 100ms as a interval in the debounce function, then the function will be triggered after 100ms.

There are lot of implementations available in Internet. I suggest you use any of these.

Written on August 9, 2014