Created
December 16, 2021 08:53
-
-
Save nfreear/c2b55a396c7e40c3e5fcda050102e07f to your computer and use it in GitHub Desktop.
When a time-dependent condition is met, resolve a promise. Reject on timeout.
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> <title> when-condition </title> | |
| <style> | |
| body { margin: 1rem auto; max-width: 25rem; zoom: 120%; } | |
| button, input { font-size: inherit; padding: .2rem 1rem; } | |
| </style> | |
| <h1> when-promise </h1> | |
| <form> | |
| <p><label> Name <input name=name required /></label> | |
| <p><button type=submit > Submit </button> | |
| </form> | |
| <script> | |
| function timeout(timeoutMs = 1000) { | |
| return new Promise(resolve => { | |
| setTimeout(() => resolve(), timeout); | |
| }); | |
| } | |
| // Doesn't work! | |
| // const sleep = delay => new Promise(resolve => setTimeout(() => resolve), delay); | |
| function when (testCallbackFn, intervalMs = 200) { | |
| return new Promise(resolve => { | |
| /* if (testCallbackFn()) { | |
| resolve(); | |
| return; | |
| } */ | |
| const intId = setInterval(() => { | |
| if (testCallbackFn()) { | |
| clearInterval(intId); | |
| resolve(); | |
| } | |
| }, | |
| intervalMs); | |
| }); | |
| } | |
| /** | |
| * When a time-dependent condition is met, resolve a promise. | |
| * If a timeout expires - reject the promise. | |
| * | |
| */ | |
| function whenTimeout (testCallbackFn, id = null, timeoutMs = 5000, intervalMs = 250) { | |
| return new Promise((resolve, reject) => { | |
| const TID = {}; | |
| TID.interval = setInterval(() => { | |
| if (testCallbackFn()) { | |
| clearAll(); | |
| resolve(); | |
| } | |
| }, | |
| intervalMs); | |
| TID.timeout = setTimeout(() => { | |
| clearAll(); | |
| reject(new Error(`whenTimeout expired: ${id}`)); | |
| }, | |
| timeoutMs); | |
| function clearAll () { | |
| // const clearAll=()=>{ | |
| clearInterval(TID.interval); | |
| clearTimeout(TID.timeout); | |
| } | |
| }); | |
| } | |
| /** | |
| @see https://github.com/SAP/ui5-webcomponents/blob/master/packages/base/src/util/whenDOMReady.js | |
| */ | |
| const whenDOMReady = () => { | |
| return new Promise(resolve => { | |
| if (document.body) { | |
| resolve(); | |
| } else { | |
| document.addEventListener('DOMContentLoaded', () => { | |
| resolve(); | |
| }); | |
| } | |
| }); | |
| }; | |
| /** | |
| * When an event occurs (once) (form submit?), resolve a promise. | |
| */ | |
| function onceEvent (selector, eventName) { | |
| return new Promise((resolve, reject) => { | |
| const ELEM = document.querySelector(selector); | |
| if (!ELEM) { | |
| reject(new Error(`Element not found: ${selector}`)); | |
| } | |
| ELEM.addEventListener(eventName, ev => resolve(ev)); | |
| }); | |
| } | |
| function formSubmit (selector = 'form') { | |
| return onceEvent(selector, 'submit'); | |
| } | |
| </script> | |
| <script> | |
| let count = 0; | |
| (async function TEST () { | |
| await whenDOMReady(); | |
| console.debug('The DOM is ready!'); | |
| console.assert(!window.jQuery); | |
| await when(() => { | |
| console.debug('Count:', count++); | |
| return window.jQuery; // typeof window.jQuery === 'function'; | |
| }); | |
| console.assert(window.jQuery); | |
| // const JQ = window.jQuery; | |
| console.debug('jQuery is loaded:', $.fn.jquery); | |
| // await whenTimeout(() => window.scriptNotFound); | |
| // console.error('Script not found!'); | |
| })(); | |
| (async () => { | |
| const ev = await formSubmit(); | |
| ev.preventDefault(); | |
| console.debug('Submit:', ev); | |
| })(); | |
| (async () => { | |
| console.debug('sleep before'); | |
| await timeout(500); | |
| // await sleep(500); | |
| console.debug('sleep passed'); | |
| addScript('https://code.jquery.com/jquery-3.6.0.slim.min.js'); | |
| addScript('https://no/script/here.js') | |
| })(); | |
| /* setTimeout(() => { | |
| const SCR = document.createElement('script'); | |
| SCR.src = 'https://code.jquery.com/jquery-3.6.0.slim.min.js'; | |
| SCR.crossorigin = ''; | |
| document.body.appendChild(SCR); | |
| console.debug('Added jQuery ...', window.jQuery); | |
| }, | |
| 500); */ | |
| setTimeout(() => console.debug('jQuery?', window.jQuery), 1500); | |
| function addScript (src) { | |
| const SCR = document.createElement('script'); | |
| SCR.src = src; | |
| SCR.crossorigin = ''; | |
| document.body.appendChild(SCR); | |
| console.debug('Script added:', src) | |
| } | |
| </script> | |
| <pre> | |
| NDF, 13-Dec-2021. | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment