javascript-tutorial / javascript-tutorial/en.javascript.info

Solution for throttle decorator is incorrect. (Decorators and forwarding, call/apply)

Open
#3,613 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
25.5k
Forks
4k
PR merge metrics
No merged PRs in 30d

Description

Original code: https://javascript.info/call-apply-decorators#throttle-decorator

Here's a small code snippet to show where it doesn't work.

```js
function f(a) { console.log(a) };

let g = throttle(f, 1000);

for(let i = 0; i < 1e8; i++) g(i);
```

#### Expected Output
1, 249204, 452039, ... , 9999999 (These are random increasing numbers)

#### Output
1, 9999999

#### Why does it fail?
```js
function wrapper() {

if (isThrottled) { // (2)
savedArgs = arguments;
savedThis = this;
return;
}
isThrottled = true;

func.apply(this, arguments); // (1)

setTimeout(function() {
isThrottled = false; // (3)
if (savedArgs) {
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
}, ms);
}
```
In above, `isThrottled = false` assignment is done inside `setTimeout` callback. However, only one callback is pushed into task queue and it isn't executed until stack is empty (for loop has to be completed).
`isThrottled` is always `true` => `setTimeout` isn't called => one callback (that was registered for initial false `isThrottled`) => cb executed at end and outputs last value => output: 1, 9999999.

#### Correct Solution: https://github.com/javascript-tutorial/en.javascript.info/pull/2844
This PR giving an alternative solution.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the throttle decorator example in the linked Decorators and forwarding, call/apply tutorial section and reproduce the provided tight-loop snippet. Compare the current behavior with pull request #2844; done means the example no longer collapses the loop to only the first and last values.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.