Make function wait until element exists

javascript

async-await

mutation-observer

dom-observation

byNikita Barsukov·Feb 28, 2025

Utilize a MutationObserver to smoothly execute code once a specific element appears in the DOM. To accomplish this, establish your observer to track changes in the DOM and activate your callback when the target is found:

function waitForElement(selector, callback) {
  new MutationObserver((mutations, observer) => {
    const element = document.querySelector(selector);
    if (element) {
      observer.disconnect(); // Done observing, let's take a break 🛋️
      callback(element); // It’s showtime! 🎬
    }
  }).observe(document, { childList: true, subtree: true });
}

// Example usage
waitForElement('#myElement', element => {
  console.log('Element:', element);
});

Pair waitForElement with your chosen selector and callback function, and let it work its asynchronous magic. The moment the element is discovered, your callback is put into action.

Dealing with third-party libraries asynchronously

In scenarios involving third-party libraries, you can't always predict when your required DOM elements will be ready. This is where synchronising your code execution with these third-party libraries pays off quite handsomely.

async function waitForElementAsync(selector) {
  await new Promise((resolve, reject) => {
    new MutationObserver((mutations, observer) => {
      const element = document.querySelector(selector);
      if (element) {
        observer.disconnect(); // Break time! ☕
        resolve(element); // Gotcha! 🎣
      }
    }).observe(document, { childList: true, subtree: true });
  });
}

// Example usage with async/await
(async () => {
  const element = await waitForElementAsync('#myElement');
  console.log('Element:', element); // Tada! 🎉
})();

Beyond MutationObserver: Other efficient approaches

There are occasions when you may wish to check a DOM element's existence with an added dash of specificity or simply explore solutions beyond MutationObserver.

Using requestAnimationFrame for smoother execution

requestAnimationFrame can be used to check for an element's appearance every frame render, ensuring smoother execution than setInterval:

function waitForElementWithAnimationFrame(selector, callback) {
  function check() {
    const element = document.querySelector(selector);
    if (element) {
      callback(element); // All aboard! 🚆
    } else {
      window.requestAnimationFrame(check); // Next stop: Existence 📍
    }
  }
  window.requestAnimationFrame(check); // Time to get rolling! 🚀
}

The interval method: a last resort

Traditional interval setting should be your last resort due to potential performance issues from continuous DOM querying:

function waitForElementWithInterval(selector, callback) {
  const interval = setInterval(() => {
    const element = document.querySelector(selector);
    if (element) {
      clearInterval(interval); // Who needs a timer now? 💁‍♀️
      callback(element); // It's game time! 🕹️
    }
  }, 100); // ⏳ Tick-tock, be mindful of your ticking clock!
}

Efficient waiting with async-await and while loop

An async function with a while loop serves as a fine alternative to MutationObserver, particularly if you wish to have a greater control over your polling mechanism:

async function waitForElementWithLoop(selector) {
  while (document.querySelector(selector) === null) {
    await new Promise(resolve => setTimeout(resolve, 100)); // Good things take time, let's wait 🕰️
  }
  return document.querySelector(selector); // Found ya! 🙌
}

The Magic of Efficient DOM Observation

Using MutationObserver effectively means limiting the scope of your DOM observation to the specific parts where changes are anticipated. This helps eliminate the excess baggage of monitoring irrelevant DOM alterations:

function waitForSpecificElement(parentNode, selector, callback) {
  new MutationObserver((mutations, observer) => {
    mutations.forEach((mutation) => {
      if (mutation.addedNodes) {
        mutation.addedNodes.forEach((newNode) => {
          if (newNode.matches && newNode.matches(selector)) {
            observer.disconnect(); // Enough observing, time for some actions! 🎯
            callback(newNode); // Got our element on the radar! 📡
          }
        });
      }
    });
  }).observe(parentNode, { childList: true, subtree: true });
}

Remember that MutationObserver is supported across all major browsers, and the mutations argument provides exhaustive details about the changes within the DOM.

Caution! Best practices and recommendations

While these solutions are robust, they should be wielded diplomatically:

Polling moderation: Continuous DOM querying could lead to performance downturns.
Specificity in observation: Use MutationObserver to observe only those parts of the DOM where changes are most likely.
Synchronisation with third-party scripts: Confirm that your dependent code is activated after third-party scripts are fully loaded.
Sequential element creation: In cases involving multiple canvases, initialize the first canvas effectively before moving to the next ones.