Skip to content

Commit

Permalink
refactor: improving details for throttle
Browse files Browse the repository at this point in the history
  • Loading branch information
Shaban-Eissa committed May 27, 2024
1 parent 762cd9a commit b20ce07
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions 4.implement-basic-throttle.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,26 @@
What is Throttling in JavaScript?
Throttling implies limiting the number of times a function gets called in a certain time period. It will prohibit a function from executing if we have invoked it “recently.” Throttling also guarantees that a function runs at a consistent rate. Throttling or sometimes also called throttle function, is a practice used in websites.

<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n4AgsTbr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bormg1vefsejfz335kqi.png">

To better understand throttling, consider the following example. Assume you’re heading to an ATM to get some cash. The bank’s guidelines state that you may only withdraw cash once every hour. You proceeded to withdraw cash from the ATM. You afterward discovered that you require additional funds. When you attempted to withdraw more cash, the ATM rejected your request, stating that you could only do so after an hour. No matter how many times you attempt, the ATM will deny your request until one hour has passed since your last transaction. It is known as throttling. We are rate-limiting a function execution over a period of time, in this case, one hour, for performing an ATM transaction.

When to Use Throttling?
Throttling is suitable for scenarios where you want to limit how often a function can be called, but you don’t want to miss any calls. For example, you might want to use throttling for:

- Fetching data from an API or a database when the user scrolls, resizes, or types
- Updating or animating elements on the page when the user scrolls, resizes, or moves the mouse
- Logging or tracking user actions or events when they occur frequently

What is Difference between throttle and debounce ?

- Throttle: Executes the function at regular intervals, controlling the rate at which it runs over time.

<img src="https://www.vehidtrtak.com/js-throttle.png">

- Debounce: Executes the function only after a specified period of inactivity, ensuring it runs only once after the last call.

<img src="https://www.vehidtrtak.com/js-debounce.png">

### Problem

Expand Down

0 comments on commit b20ce07

Please sign in to comment.