Sometimes, we want to make a function wait until element exists with JavaScript.
In this article, we’ll look at how to make a function wait until element exists with JavaScript.
How to make a function wait until element exists with JavaScript?
To make a function wait until element exists with JavaScript, we use the MutationObserver
.
For instance, we write
const handleCanvas = (canvas) => {
//...
};
const observer = new MutationObserver((mutations, me) => {
const canvas = document.getElementById("my-canvas");
if (canvas) {
handleCanvas(canvas);
me.disconnect();
return;
}
});
observer.observe(document, {
childList: true,
subtree: true,
});
to call the MutationObserver
constructor with a callback that’s called when there’re any changes in the DOM.
In it, we get the canvas element with getElementById
.
If it exists, then we call the handleCanvas
function and call disconnect
to stop watching for DOM changes.
We call observer.observe
to start watching for DOM changes on document
.
We set childList
and subtree
to true
to watch for nested DOM tree changes.
Conclusion
To make a function wait until element exists with JavaScript, we use the MutationObserver
.