JavaScript waitFor Polling

By  on  

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!

Recent Features

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Discussion

  1. Who knew asynchronous programming could be this elegant? This waitFor tutorial is a game-changer for smoother code execution. Thanks for sharing, David Walsh!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!