/index.html
Created Feb 7, 2019
JS Bin // source https://jsbin.com/cegiseq
| <!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> |
| 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