This content originally appeared on David Walsh Blog and was authored by David Walsh
As more of the JavaScript developers write becomes asynchronous, it’s only natural to need to wait for conditions to be met. This is especially true in a world with asynchronous testing of conditions which don’t provide an explicit await. I’ve written about waitForever, waitForTime, and JavaScript Polling in the past, but I wanted to have a more modern way of awaiting a given state. Let’s have a look at this super useful waitFor function!
waitFor is an async function that allows developers to provide a condition function, polling interval (in milliseconds), and optional timeout (in milliseconds).
// Polls every 50 milliseconds for a given condition
const waitFor = async (condition, pollInterval = 50, timeoutAfter) => {
// Track the start time for timeout purposes
const startTime = Date.now();
while (true) {
// Check for timeout, bail if too much time passed
if(typeof(timeoutAfter) === 'number' && Date.now() > startTime + timeoutAfter) {
throw 'Condition not met before timeout';
}
// Check for conditon immediately
const result = await condition();
// If the condition is met...
if(result) {
// Return the result....
return result;
}
// Otherwise wait and check after pollInterval
await new Promise(r => setTimeout(r, pollInterval));
}
};
Using this function is as simple as just providing a condition function:
await waitFor(() => document.body.classList.has('loaded'));
Timing out the interval and timeout is also simple:
await waitFor(
() => document.body.classList.has('loaded'),
// Checks every 100 milliseconds
100,
// Throws if the "loaded" class isn't on the body after 1 second
10000
);
In an ideal world, developers would always have a handle on the Promise that could be await‘d or then‘d. In practice, however, that isn’t always the case, especially in a testing environment. Being able to await a condition in any environment is an absolute must, so keep this snippet in your toolbox!
The post JavaScript waitFor Polling appeared first on David Walsh Blog.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2023-08-14T10:08:16+00:00) JavaScript waitFor Polling. Retrieved from https://www.scien.cx/2023/08/14/javascript-waitfor-polling/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.