|
| 1 | +## In this demo we are going to investigate more about timer delay. |
| 2 | +* Folder structure: |
| 3 | + |
| 4 | +05 User interactions/ |
| 5 | +├── src/ |
| 6 | +│ ├── content/ |
| 7 | +| | ├── site.css |
| 8 | +│ ├── js/ |
| 9 | +| | ├── main.js |
| 10 | +│ ├── index.html |
| 11 | +│ └── bootstrap-theme.min.css |
| 12 | +├── gulpfile.js |
| 13 | +├── package.json |
| 14 | + |
| 15 | +* Start from previous code demo. |
| 16 | + |
| 17 | +## Steps. |
| 18 | + |
| 19 | +### 1. Refactor the `index.html` for our demo. |
| 20 | + |
| 21 | +* Just paste this code. |
| 22 | + |
| 23 | +```diff html |
| 24 | +<!doctype html> |
| 25 | + |
| 26 | +<html lang="en"> |
| 27 | +<head> |
| 28 | + <meta charset="utf-8"> |
| 29 | + <title>LEMONCODE 16/17 jQuery</title> |
| 30 | + <link rel="stylesheet" href="content/site.css"> |
| 31 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| 32 | +- <script src="./js/main.js"></script> |
| 33 | +</head> |
| 34 | + |
| 35 | +<body> |
| 36 | + <h1>API Rest</h1> |
| 37 | +- <div id="content"></div> |
| 38 | ++ <script src="./js/main.js"></script> |
| 39 | +</body> |
| 40 | +</html> |
| 41 | + |
| 42 | +``` |
| 43 | + |
| 44 | +* Do not modify `site.css` |
| 45 | + |
| 46 | +### 2. Lets change our `main.js`, for this demo. |
| 47 | + |
| 48 | +* Remove all the previous code. |
| 49 | + |
| 50 | +```javascript |
| 51 | +(() => { |
| 52 | + let repitions = 0; |
| 53 | + const totalRepetions = 1000; |
| 54 | + const requestDelay = 0; |
| 55 | + let totalDelay = 0; |
| 56 | + |
| 57 | + const testDelay = () => { |
| 58 | + if (repitions++ > totalRepetions) { |
| 59 | + const avarage = totalDelay / totalRepetions; |
| 60 | + alert(` |
| 61 | + Request delay: ${requestDelay}, |
| 62 | + Avarage delay: ${avarage} |
| 63 | + `); |
| 64 | + return; |
| 65 | + } |
| 66 | + |
| 67 | + const start = new Date(); |
| 68 | + setTimeout(() => { |
| 69 | + const delay = new Date() - start; |
| 70 | + totalDelay += delay; |
| 71 | + testDelay(); |
| 72 | + }, requestDelay); |
| 73 | + }; |
| 74 | + |
| 75 | + testDelay(); |
| 76 | +})(); |
| 77 | + |
| 78 | +``` |
| 79 | +* Challange -> How many `async code fragments`? |
| 80 | + * Two, if we count the main. Other thing is to take into a count what is going on inside `testDelay` |
| 81 | + |
| 82 | +* This code compares the `setTimeout actual delay` versus the `requested delay`. The value of `totalDelay` is the time that our function is waiting to be invoke. |
| 83 | + |
| 84 | +* The delay is initialized to `0`, when we are executing this we are asking for a `0` delay, but the avarage is close to `5ms`. |
| 85 | + |
| 86 | +* If we change `requestDelay` to `10`, the avarage gets closer to `10ms`. The reason that this is happen is because by default the browser will set a value close to 4 by default. |
| 87 | + |
| 88 | +* El delay lo inicializamos a 0, cuando lo ejecutamos, estamos pidiendo un delay de 0, pero en el avarage llega cerca de los 5 ms. Lo cambiamos a 10 ms. y la media de resultado que nos da es mucho más proxima a 10ms. La razón de que ocurra esto, es que cuando nosotros ponemos 10 ms, el navegador lo va a modificar para que sean 4ms. |
0 commit comments