make sure a solution always shows up, use "demo" if exists

This commit is contained in:
Ilya Kantor 2019-02-21 19:35:04 +03:00
parent 360be9ed99
commit 408ba7d4e4
25 changed files with 59 additions and 95 deletions

View file

@ -14,7 +14,7 @@ alert( arr.filter(inBetween(3, 6)) ); // 3,4,5,6
# Filter inArray
```js run
```js run demo
function inArray(arr) {
return function(x) {
return arr.includes(x);

View file

@ -55,9 +55,9 @@ function makeArmy() {
As a result, all `shooter` functions get from the outer lexical envrironment the same, last value `i=10`.
The fix can be very simple:
We can fix it by moving the variable definition into the loop:
```js run
```js run demo
function makeArmy() {
let shooters = [];
@ -80,9 +80,9 @@ army[0](); // 0
army[5](); // 5
```
Now it works correctly, because every time the code block in `for (..) {...}` is executed, a new Lexical Environment is created for it, with the corresponding value of `i`.
Now it works correctly, because every time the code block in `for (let i=0...) {...}` is executed, a new Lexical Environment is created for it, with the corresponding variable `i`.
So, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration. A `shooter` gets the value exactly from the one where it was created.
So, the value of `i` now lives a little bit closer. Not in `makeArmy()` Lexical Environment, but in the Lexical Environment that corresponds the current loop iteration. That's why now it works.
![](lexenv-makearmy.png)
@ -90,7 +90,6 @@ Here we rewrote `while` into `for`.
Another trick could be possible, let's see it for better understanding of the subject:
```js run
function makeArmy() {
let shooters = [];

View file

@ -1,6 +1,6 @@
The solution:
```js
```js run demo
function delay(f, ms) {
return function() {
@ -8,20 +8,25 @@ function delay(f, ms) {
};
}
let f1000 = delay(alert, 1000);
f1000("test"); // shows "test" after 1000ms
```
Please note how an arrow function is used here. As we know, arrow functions do not have own `this` and `arguments`, so `f.apply(this, arguments)` takes `this` and `arguments` from the wrapper.
If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (in-browser), so we'd need to write a bit more code to pass them from the wrapper:
If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (assuming we're in the browser).
We still can pass the right `this` by using an intermediate variable, but that's a little bit more cumbersome:
```js
function delay(f, ms) {
// added variables to pass this and arguments from the wrapper inside setTimeout
return function(...args) {
let savedThis = this;
let savedThis = this; // store this into an intermediate variable
setTimeout(function() {
f.apply(savedThis, args);
f.apply(savedThis, args); // use it here
}, ms);
};

View file

@ -1,6 +1,4 @@
```js run no-beautify
```js demo
function debounce(f, ms) {
let isCooldown = false;
@ -18,7 +16,7 @@ function debounce(f, ms) {
}
```
The call to `debounce` returns a wrapper. There may be two states:
A call to `debounce` returns a wrapper. There may be two states:
- `isCooldown = false` -- ready to run.
- `isCooldown = true` -- waiting for the timeout.

View file

@ -1,4 +1,4 @@
```js
```js demo
function throttle(func, ms) {
let isThrottled = false,