Skip to content

Commit fe90e97

Browse files
JaimeSalasJaimeSalas
committed
Added event listeners are sync
1 parent 40ba0ef commit fe90e97

File tree

8 files changed

+3276
-1
lines changed

8 files changed

+3276
-1
lines changed

‎09 Web Workers/README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,8 @@ longTask(postMessage);
216216
</html>
217217

218218
```
219-
* En conclusión, uando el web worker se ejecuta, crunchNumbers es llamado, postMessage es la función que se usa para mandar mensajesal principal, el engine de JavaScript que controla la UI.
219+
// TODO: Translate
220+
221+
* En conclusión, cuando el web worker se ejecuta, `longTask` es llamado, `postMessage` es la función que se usa para mandar mensajes al principal, el engine de JavaScript que controla la UI.
220222
* Este ejemplo de IPC, en realidad no lo es. Este web workerque hemos creado con new, es un web worker dedicado, sólo es un thread que se ejecuta dentro del mismo proceso, pero aún así tenemos cierta separación entre la ejecución del JavaScript que esta ejcutando estos workers.
221223
* Existe una asincronicidad debido a la separación de hilos. Los shared workers, si ejecutan sus propios procesos, y son un ejemplo claro de IPC.

‎10 Event listeners are sync/README.md

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
## In this demo we are going to work with Event Listeners.
2+
* Folder structure:
3+
4+
10 Web Workers/
5+
├── src/
6+
│ ├── content/
7+
| | ├── site.css
8+
│ ├── js/
9+
| | ├── main.js
10+
│ ├── index.html
11+
├── gulpfile.js
12+
├── package.json
13+
14+
* Start from previous code demo.
15+
16+
## Steps.
17+
18+
### 1. Refactor the `index.html` for our demo.
19+
20+
```diff html
21+
<!doctype html>
22+
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>LEMONCODE 16/17 jQuery</title>
27+
<link rel="stylesheet" href="content/site.css">
28+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
29+
</head>
30+
31+
<body>
32+
<h1>API Rest</h1>
33+
- <!-- HTML5 element to show progress -->
34+
- <progress id="worker-progress" value="0" max="100"></progress>
35+
- <script src="./js/background.js"></script>
36+
+ <button id="btn">Click me!!</button>
37+
+ <script src="./js/main.js"></script>
38+
</body>
39+
</html>
40+
41+
```
42+
43+
### 2. Lets change our `site.css`, for this demo.
44+
45+
```diff site.css
46+
@import url('https://fonts.googleapis.com/css?family=Raleway');
47+
48+
body {
49+
font-family: 'Raleway', sans-serif;
50+
}
51+
52+
.container {
53+
padding: 2em;
54+
}
55+
56+
.container p {
57+
max-width: 70%;
58+
font-size: 0.9em;
59+
margin-top: 0.2em;
60+
margin-bottom: 0.2em;
61+
height: 2.3em;
62+
}
63+
64+
.container p img {
65+
max-width: 95%;
66+
max-height: 95%;
67+
position: relative;
68+
top: 0.7em;
69+
left: 1em;
70+
}
71+
72+
.container ul {
73+
list-style: none;
74+
}
75+
76+
-progress {
77+
- width: 80%;
78+
- height: 20px;
79+
- -webkit-appearance: none;
80+
-}
81+
-
82+
-progress::-webkit-progress-bar {
83+
- background: lightgrey;
84+
- border-radius: 50px;
85+
- border: 1px solid gray;
86+
-}
87+
-
88+
-progress::-webkit-progress-value {
89+
- background: #31C6F7;
90+
- border-radius: 50px;
91+
-}
92+
-
93+
```
94+
### 3. Now we can add `main.js`
95+
96+
```javascript main.js
97+
(function () {
98+
const btn = document.getElementById('btn');
99+
100+
btn.addEventListener('click', function () {
101+
console.log('click-1');
102+
});
103+
104+
btn.addEventListener('click', function () {
105+
console.log('click-2');
106+
});
107+
108+
setTimeout(function () {
109+
console.log('pre-click');
110+
btn.click(); // De manera síncrona, llama a cada uno de los handlers.
111+
console.log('post-click');
112+
}, 0);
113+
})();
114+
115+
```
116+
### Challanege -> ¿Cuantos programas pequeños tenemos aquí? // 2
117+
###¿Y cuando lo ejecutemos que se verá en la consola? // pre-click click-1 click-2 post-click
118+
119+
* Lo normal es tender a pensar que hubiera 3 o 4 pequeños programas. Habría 4, si los EventListeners fueran disparados de manera asíncrona, pero los EventListeners son disparados de forma síncrona.
120+
121+
* Tiene que ser así básicamente, para poder lanzar otra iteración del mismo evento.
122+
123+
* NOTA: En el debugger nos podemos cercionar de ello, porque ambos estan en el call stack.

‎10 Event listeners are sync/gulpfile.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use strict';
2+
3+
const gulp = require('gulp'),
4+
connect = require('gulp-connect'),
5+
open = require('gulp-open'),
6+
options = {
7+
port: 9005,
8+
root: ['src'],
9+
devBase: 'http://localhost:',
10+
browsers: ['safari', 'chrome']
11+
},
12+
openOptions = {
13+
uri: options.devBase + options.port,
14+
app: options.browser
15+
};
16+
17+
gulp.task('connect', () => connect.server({
18+
root: options.root,
19+
port: options.port
20+
}));
21+
// https://github.com/stevelacy/gulp-open/issues/15
22+
gulp.task('open', () => gulp.src(__filename).pipe(open(openOptions)));
23+
24+
gulp.task('default', ['connect', 'open']);

0 commit comments

Comments
 (0)