From ec2cb4cf1573d7cede5b66b24cbc354b867896cb Mon Sep 17 00:00:00 2001 From: Sara Lissette Date: Sun, 18 Mar 2018 21:42:55 +0000 Subject: [PATCH 1/3] Revised the README.md --- 10 Event listeners are sync/README.md | 32 ++++++++++++++++++++------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/10 Event listeners are sync/README.md b/10 Event listeners are sync/README.md index dca30e5..824cb20 100644 --- a/10 Event listeners are sync/README.md +++ b/10 Event listeners are sync/README.md @@ -1,6 +1,8 @@ -## In this demo we are going to work with Event Listeners. +# In this demo we are going to work with Event Listeners + * Folder structure: +```bash 10 Web Workers/ ├── src/ │ ├── content/ @@ -10,15 +12,16 @@ │ ├── index.html ├── gulpfile.js ├── package.json +``` * Start from previous code demo. -## Steps. +## Steps -### 1. Refactor the `index.html` for our demo. +### 1. Refactor the `index.html` for our demo ```diff html - + @@ -40,7 +43,7 @@ ``` -### 2. Lets change our `site.css`, for this demo. +### 2. Lets change our `site.css`, for this demo ```diff site.css @import url('https://fonts.googleapis.com/css?family=Raleway'); @@ -91,9 +94,12 @@ body { -} - ``` + ### 3. Now we can add `main.js` -```javascript main.js +```javascript +main.js + (function () { const btn = document.getElementById('btn'); @@ -113,8 +119,18 @@ body { })(); ``` -### Challanege -> ¿Cuantos programas pequeños tenemos aquí? // 2 -###¿Y cuando lo ejecutemos que se verá en la consola? // pre-click click-1 click-2 post-click + +### Challenge -> ¿Cuántos programas pequeños tenemos aquí? + +```javascript +// 2 +``` + +### ¿Y cuándo lo ejecutemos que se verá en la consola? + +```javascript +// pre-click click-1 click-2 post-click +``` * 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. From a26fbadcbf4a9d4f3ab8f20c08e654ba7f3920dc Mon Sep 17 00:00:00 2001 From: Sara Lissette Date: Tue, 20 Mar 2018 22:19:42 +0000 Subject: [PATCH 2/3] Forced to work synchronously --- 01 Non blocking/src/js/apiIceAndFire.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01 Non blocking/src/js/apiIceAndFire.js b/01 Non blocking/src/js/apiIceAndFire.js index 58ac8cb..635a7ad 100644 --- a/01 Non blocking/src/js/apiIceAndFire.js +++ b/01 Non blocking/src/js/apiIceAndFire.js @@ -19,7 +19,7 @@ const getRequest = (config) => { }; const sendGetRequest = (req, url) => { - req.open('get', url, true); + req.open('get', url, false); // setting async to false, send() does not return until the response is received, then is forced to work synchronously req.send(); }; From 34e3f63ebf6c19fb8822c974fe82909faf7ee7b0 Mon Sep 17 00:00:00 2001 From: Sara Lissette Date: Wed, 21 Mar 2018 10:57:25 +0000 Subject: [PATCH 3/3] Fixed the way to get results --- 01 Non blocking/src/js/apiIceAndFire.js | 2 +- 01 Non blocking/src/js/main.js | 42 ++++++++++++++----------- 01 Non blocking/src/js/mapper.js | 4 +-- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/01 Non blocking/src/js/apiIceAndFire.js b/01 Non blocking/src/js/apiIceAndFire.js index 635a7ad..58ac8cb 100644 --- a/01 Non blocking/src/js/apiIceAndFire.js +++ b/01 Non blocking/src/js/apiIceAndFire.js @@ -19,7 +19,7 @@ const getRequest = (config) => { }; const sendGetRequest = (req, url) => { - req.open('get', url, false); // setting async to false, send() does not return until the response is received, then is forced to work synchronously + req.open('get', url, true); req.send(); }; diff --git a/01 Non blocking/src/js/main.js b/01 Non blocking/src/js/main.js index 357fbfa..36de22f 100644 --- a/01 Non blocking/src/js/main.js +++ b/01 Non blocking/src/js/main.js @@ -1,9 +1,6 @@ document.onreadystatechange = () => { const load = () => { const search_button = document.getElementById('search_button'); - const service = new apiIceAndFire.Service(); - const printer = new printService.Printer(); - const apiMapper = mapper.apiMapper(); search_button.addEventListener('click', (event) => { event.stopPropagation(); @@ -11,41 +8,50 @@ document.onreadystatechange = () => { const characterInput = document.getElementById('input-character'); if (houseInput.value && characterInput.value) { - console.log('1'); - const housesRequestConfig = { - err: handleError, - callback: handleHousesRequestSucces(apiMapper, printer) - }; - service.getHousesByName(houseInput.value, housesRequestConfig); - console.log('2'); - const charactersRequestConfig = { - err: handleError, - callback: handleCharactersRequestSuccess(apiMapper, printer) - }; - service.getCharactersByName(characterInput.value, charactersRequestConfig); - console.log('3'); + getHouseBeforeCharacter(houseInput.value, characterInput.value); } else { alert('Introduce a values') } }); }; + const service = new apiIceAndFire.Service(); + const printer = new printService.Printer(); + const apiMapper = mapper.apiMapper(); + + function getCharacter(character) { + const charactersRequestConfig = { + err: handleError, + callback: handleCharactersRequestSuccess(apiMapper, printer) + }; + service.getCharactersByName(character, charactersRequestConfig); + } + + function getHouseBeforeCharacter(house, character) { + const housesRequestConfig = { + err: handleError, + callback: handleHousesRequestSuccess(apiMapper, printer, character) + }; + service.getHousesByName(house, housesRequestConfig); + } + function handleError() { console.log(JSON.parse(this.responseText)); }; - function handleHousesRequestSucces(apiMapper, printer) { + function handleHousesRequestSuccess(apiMapper, printer, character) { return function () { const data = JSON.parse(this.responseText); const houses = apiMapper.housesMap(data); printer.printHouses(houses, 'houses'); + getCharacter(character); }; }; function handleCharactersRequestSuccess(apiMapper, printer) { return function () { const data = JSON.parse(this.responseText); - const characters = apiMapper.caracthersMap(data); + const characters = apiMapper.charactersMap(data); printer.printCharacters(characters, 'characters'); }; } diff --git a/01 Non blocking/src/js/mapper.js b/01 Non blocking/src/js/mapper.js index 2d702ed..a8992c9 100644 --- a/01 Non blocking/src/js/mapper.js +++ b/01 Non blocking/src/js/mapper.js @@ -11,7 +11,7 @@ var mapper = mapper || {}; })) ); - const caracthersMap = (characters) => ( + const charactersMap = (characters) => ( characters.map(c => ({ name: c.name, born: c.born, @@ -21,7 +21,7 @@ var mapper = mapper || {}; return { housesMap, - caracthersMap + charactersMap } }; })(mapper)