Skip to content

Commit cd5a7e4

Browse files
iliakaniliakan
committed
fix debounce
1 parent ba2b7b0 commit cd5a7e4

File tree

9 files changed

+103
-54
lines changed

9 files changed

+103
-54
lines changed

‎1-js/02-first-steps/01-hello-world/article.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Here, `/path/to/script.js` is an absolute path to the script from the site root.
7878
We can give a full URL as well. For instance:
7979

8080
```html
81-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
81+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
8282
```
8383

8484
To attach several scripts, use multiple tags:

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/solution.js‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
function debounce(f, ms) {
2-
3-
let isCooldown = false;
4-
1+
function debounce(func, ms) {
2+
let timeout;
53
return function() {
6-
if (isCooldown) return;
7-
8-
f.apply(this, arguments);
9-
10-
isCooldown = true;
11-
12-
setTimeout(() => isCooldown = false, ms);
4+
clearTimeout(timeout);
5+
timeout = setTimeout(() => func.apply(this, arguments), ms);
136
};
14-
15-
}
7+
}

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,30 @@ describe("debounce", function() {
77
this.clock.restore();
88
});
99

10-
it("trigger the fuction execution immediately", function () {
11-
let mode;
12-
const f = () => mode='leading';
13-
14-
debounce(f, 1000)(); // runs without a delay
10+
it("for one call - runs it after given ms", function () {
11+
const f = sinon.spy();
12+
const debounced = debounce(f, 1000);
1513

16-
assert.equal(mode, 'leading');
14+
debounced("test");
15+
assert(f.notCalled);
16+
this.clock.tick(1000);
17+
assert(f.calledOnceWith("test"));
1718
});
1819

19-
it("calls the function at maximum once in ms milliseconds", function() {
20-
let log = '';
20+
it("for 3 calls - runs the last one after given ms", function() {
21+
const f = sinon.spy();
22+
const debounced = debounce(f, 1000);
2123

22-
function f(a) {
23-
log += a;
24-
}
24+
f("a")
25+
setTimeout(() => f("b"), 200); // ignored (too early)
26+
setTimeout(() => f("c"), 500); // runs (1000 ms passed)
27+
this.clock.tick(1000);
2528

26-
f = debounce(f, 1000);
29+
assert(f.notCalled);
2730

28-
f(1); // runs at once
29-
f(2); // ignored
31+
this.clock.tick(500);
3032

31-
setTimeout(() => f(3), 100); // ignored (too early)
32-
setTimeout(() => f(4), 1100); // runs (1000 ms passed)
33-
setTimeout(() => f(5), 1500); // ignored (less than 1000 ms from the last run)
34-
35-
this.clock.tick(5000);
36-
assert.equal(log, "14");
33+
assert(f.calledOnceWith('c'));
3734
});
3835

3936
it("keeps the context of the call", function() {
@@ -45,6 +42,7 @@ describe("debounce", function() {
4542

4643
obj.f = debounce(obj.f, 1000);
4744
obj.f("test");
45+
this.clock.tick(5000);
4846
});
4947

5048
});

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
3+
4+
Function <code>handler</code> is called on this input:
5+
<br>
6+
<input id="input1" placeholder="type here">
7+
8+
<p>
9+
10+
Debounced function <code>debounce(handler, 1000)</code> is called on this input:
11+
<br>
12+
<input id="input2" placeholder="type here">
13+
14+
<p>
15+
<button id="result">The <code>handler</code> puts the current result here</button>
16+
17+
<script>
18+
function handler(event) {
19+
result.innerHTML = event.target.value;
20+
}
21+
22+
input1.oninput = handler;
23+
input2.oninput = _.debounce(handler, 1000);
24+
</script>

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,50 @@ importance: 5
44

55
# Debounce decorator
66

7-
The result of `debounce(f, ms)` decorator should be a wrapper that passes the call to `f` at maximum once per `ms` milliseconds.
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
88

9-
In other words, when we call a "debounced" function, it guarantees that all future calls to the function made less than `ms` milliseconds after the previous call will be ignored.
9+
The result of `debounce(f, ms)` decorator should be a wrapper that suspends any calls to `f` and invokes `f` once after `ms` of inactivity.
1010

11-
For instance:
11+
Let's say we had a function `f` and replaced it with `f = debounce(f, 1000)`.
1212

13-
```js no-beautify
14-
let f = debounce(alert, 1000);
13+
Then if the wrapped function is called at 0ms, 200ms and 500ms, and then there are no calls, then the actual `f` will be only called once, at 1500ms. That is: after the cooldown period of 1000ms from the last call.
1514

16-
f(1); // runs immediately
17-
f(2); // ignored
15+
![](debounce.svg)
1816

19-
setTimeout( () => f(3), 100); // ignored ( only 100 ms passed )
20-
setTimeout( () => f(4), 1100); // runs
21-
setTimeout( () => f(5), 1500); // ignored (less than 1000 ms from the last run)
17+
...And it will get the arguments of the very last call, other calls are ignored.
18+
19+
Here's the code (uses the debounce decorator from the [Lodash library](https://lodash.com/docs/4.17.15#debounce):
20+
21+
```js
22+
let f = _.debounce(alert, 1000);
23+
24+
f("a");
25+
setTimeout( () => f("b"), 200);
26+
setTimeout( () => f("c"), 500);
27+
// debounced function waits 1000ms after the last call and then runs: alert("c")
28+
```
29+
30+
31+
Now a practical example. Let's say, the user types something, and we'd like to send a request to the server once they're finished.
32+
33+
There's no point in sending the request for every character typed. Instead we'd like to wait, and then process the whole result. The `debounce` decorator makes this easy.
34+
35+
In a web-browser, we can setup an event handler -- a function that's called on every change of an input field. Normally, an event handler is called very often, for every typed key. But if we `debounce` it by 1000ms, then it will be only called once, after 1000ms after the last input.
36+
37+
```online
38+
39+
In this live example, the handler puts the result into a box below, try it:
40+
41+
[iframe border=1 src="debounce" height=200]
42+
43+
See? The second input calls the debounced function, so its content is processed after 1000ms from the last input.
2244
```
2345

24-
In practice `debounce` is useful for functions that retrieve/update something when we know that nothing new can be done in such a short period of time, so it's better not to waste resources.
46+
So, `debounce` is a great way to process a sequence of events: be it a sequence of key presses, mouse movements or something else.
47+
48+
49+
It waits the given time after the last call, and then runs its function, that can process the result.
50+
51+
Implement `debounce` decorator.
52+
53+
Hint: that's just a few lines if you think about it :)

‎1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@ importance: 5
44

55
# Throttle decorator
66

7-
Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper, passing the call to `f` at maximum once per `ms` milliseconds. Those calls that fall into the "cooldown" period, are ignored.
7+
Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper.
88

9-
**The difference with `debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
9+
When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds.
10+
11+
The difference with debounce is that it's completely different decorator:
12+
- `debounce` runs the function once after the "cooldown" period. Good for processing the final result.
13+
- `throttle` runs it not more often than given `ms` time. Good for regular updates that shouldn't be very often.
1014

1115
Let's check the real-life application to better understand that requirement and to see where it comes from.
1216

1317
**For instance, we want to track mouse movements.**
1418

1519
In a browser we can setup a function to run at every mouse movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms).
16-
1720
**We'd like to update some information on the web-page when the pointer moves.**
1821

1922
...But updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in updating more often than once per 100ms.

‎1-js/06-advanced-functions/09-call-apply-decorators/article.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ To make it all clear, let's see more deeply how `this` is passed along:
209209
2. So when `worker.slow(2)` is executed, the wrapper gets `2` as an argument and `this=worker` (it's the object before dot).
210210
3. Inside the wrapper, assuming the result is not yet cached, `func.call(this, x)` passes the current `this` (`=worker`) and the current argument (`=2`) to the original method.
211211

212-
## Going multi-argument with "func.apply"
212+
## Going multi-argument
213213

214214
Now let's make `cachingDecorator` even more universal. Till now it was working only with single-argument functions.
215215

@@ -236,7 +236,7 @@ There are many solutions possible:
236236

237237
For many practical applications, the 3rd variant is good enough, so we'll stick to it.
238238

239-
Also we need to replace `func.call(this, x)` with `func.call(this, ...arguments)`, to pass all arguments to the wrapped function call, not just the first one.
239+
Also we need to pass not just `x`, but all arguments in `func.call`. Let's recall that in a `function()` we can get a pseudo-array of its arguments as `arguments`, so `func.call(this, x)` should be replaced with `func.call(this, ...arguments)`.
240240

241241
Here's a more powerful `cachingDecorator`:
242242

@@ -284,6 +284,8 @@ There are two changes:
284284
- In the line `(*)` it calls `hash` to create a single key from `arguments`. Here we use a simple "joining" function that turns arguments `(3, 5)` into the key `"3,5"`. More complex cases may require other hashing functions.
285285
- Then `(**)` uses `func.call(this, ...arguments)` to pass both the context and all arguments the wrapper got (not just the first one) to the original function.
286286

287+
## func.apply
288+
287289
Instead of `func.call(this, ...arguments)` we could use `func.apply(this, arguments)`.
288290

289291
The syntax of built-in method [func.apply](mdn:js/Function/apply) is:
@@ -303,14 +305,14 @@ func.call(context, ...args); // pass an array as list with spread syntax
303305
func.apply(context, args); // is same as using call
304306
```
305307

306-
There's only a minor difference:
308+
There's only a subtle difference:
307309

308310
- The spread syntax `...` allows to pass *iterable* `args` as the list to `call`.
309311
- The `apply` accepts only *array-like* `args`.
310312

311-
So, these calls complement each other. Where we expect an iterable, `call` works, where we expect an array-like, `apply` works.
313+
So, where we expect an iterable, `call` works, and where we expect an array-like, `apply` works.
312314

313-
And for objects that are both iterable and array-like, like a real array, we technically could use any of them, but `apply` will probably be faster, because most JavaScript engines internally optimize it better.
315+
And for objects that are both iterable and array-like, like a real array, we can use any of them, but `apply` will probably be faster, because most JavaScript engines internally optimize it better.
314316

315317
Passing all arguments along with the context to another function is called *call forwarding*.
316318

@@ -344,7 +346,7 @@ function hash(args) {
344346
}
345347
```
346348

347-
...Unfortunately, that won't work. Because we are calling `hash(arguments)` and `arguments` object is both iterable and array-like, but not a real array.
349+
...Unfortunately, that won't work. Because we are calling `hash(arguments)`, and `arguments` object is both iterable and array-like, but not a real array.
348350

349351
So calling `join` on it would fail, as we can see below:
350352

‎figures.sketch‎

116 KB
Binary file not shown.

0 commit comments

Comments
 (0)