Created
February 7, 2019 13:17
-
-
Save alessioalex/2ac7816bd64744fea9c6fea0398cccac to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/cegiseq
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <pre id='display-panel'></pre> | |
| <script id="jsbin-javascript"> | |
| function getRandomInt(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } | |
| const search = (word, callback) => { | |
| const results = ['foo', 'bar', 'baz', 'baz2', 'etc', 'etc2']; | |
| const numberOfResults = getRandomInt(1, results.length); | |
| const randomTimeout = getRandomInt(1, 4); | |
| setTimeout(() => { | |
| callback(null, results.slice(0, numberOfResults)); | |
| }, randomTimeout); | |
| }; | |
| const display = (data) => { | |
| console.log('display', data); | |
| const el = document.querySelector('#display-panel'); | |
| const msg = (typeof data === 'string') ? data : data.join(', '); | |
| el.textContent = msg; | |
| }; | |
| const displaySearchResults = (error, results) => { | |
| if (error) { | |
| display('Search failed, please retry later.'); | |
| } else { | |
| display(results); | |
| } | |
| }; | |
| const word = 'cats'; | |
| // will display random results each time | |
| // uncomment to check | |
| // search(word, displaySearchResults); | |
| const searchWrapper = (word, callback) => { | |
| const key = `search-${word}`; | |
| const results = sessionStorage.getItem(key); | |
| if (results) { | |
| // keeping things asynchronous | |
| setTimeout(() => callback(null, results), 1); | |
| } else { | |
| search(word, (error, res) => { | |
| if (error) { return callback(error); } | |
| // keeping the results in cache | |
| sessionStorage.setItem(key, res); | |
| callback(null, res); | |
| }); | |
| } | |
| }; | |
| // will always display the same results because they are cached | |
| searchWrapper('cats', displaySearchResults); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function getRandomInt(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } | |
| const search = (word, callback) => { | |
| const results = ['foo', 'bar', 'baz', 'baz2', 'etc', 'etc2']; | |
| const numberOfResults = getRandomInt(1, results.length); | |
| const randomTimeout = getRandomInt(1, 4); | |
| setTimeout(() => { | |
| callback(null, results.slice(0, numberOfResults)); | |
| }, randomTimeout); | |
| }; | |
| const display = (data) => { | |
| console.log('display', data); | |
| const el = document.querySelector('#display-panel'); | |
| const msg = (typeof data === 'string') ? data : data.join(', '); | |
| el.textContent = msg; | |
| }; | |
| const displaySearchResults = (error, results) => { | |
| if (error) { | |
| display('Search failed, please retry later.'); | |
| } else { | |
| display(results); | |
| } | |
| }; | |
| const word = 'cats'; | |
| // will display random results each time | |
| // uncomment to check | |
| // search(word, displaySearchResults); | |
| const searchWrapper = (word, callback) => { | |
| const key = `search-${word}`; | |
| const results = sessionStorage.getItem(key); | |
| if (results) { | |
| // keeping things asynchronous | |
| setTimeout(() => callback(null, results), 1); | |
| } else { | |
| search(word, (error, res) => { | |
| if (error) { return callback(error); } | |
| // keeping the results in cache | |
| sessionStorage.setItem(key, res); | |
| callback(null, res); | |
| }); | |
| } | |
| }; | |
| // will always display the same results because they are cached | |
| searchWrapper('cats', displaySearchResults); | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function getRandomInt(min, max) { | |
| return Math.random() * (max - min) + min; | |
| } | |
| const search = (word, callback) => { | |
| const results = ['foo', 'bar', 'baz', 'baz2', 'etc', 'etc2']; | |
| const numberOfResults = getRandomInt(1, results.length); | |
| const randomTimeout = getRandomInt(1, 4); | |
| setTimeout(() => { | |
| callback(null, results.slice(0, numberOfResults)); | |
| }, randomTimeout); | |
| }; | |
| const display = (data) => { | |
| console.log('display', data); | |
| const el = document.querySelector('#display-panel'); | |
| const msg = (typeof data === 'string') ? data : data.join(', '); | |
| el.textContent = msg; | |
| }; | |
| const displaySearchResults = (error, results) => { | |
| if (error) { | |
| display('Search failed, please retry later.'); | |
| } else { | |
| display(results); | |
| } | |
| }; | |
| const word = 'cats'; | |
| // will display random results each time | |
| // uncomment to check | |
| // search(word, displaySearchResults); | |
| const searchWrapper = (word, callback) => { | |
| const key = `search-${word}`; | |
| const results = sessionStorage.getItem(key); | |
| if (results) { | |
| // keeping things asynchronous | |
| setTimeout(() => callback(null, results), 1); | |
| } else { | |
| search(word, (error, res) => { | |
| if (error) { return callback(error); } | |
| // keeping the results in cache | |
| sessionStorage.setItem(key, res); | |
| callback(null, res); | |
| }); | |
| } | |
| }; | |
| // will always display the same results because they are cached | |
| searchWrapper('cats', displaySearchResults); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment