DEV Community

loading...
Cover image for "Let me wait-for-it and call you back", said wait-for-it.js

"Let me wait-for-it and call you back", said wait-for-it.js

Muhammad Tayyab Sheikh
Active contributor of Opensource Community, Linux Enthusiast and active JavaScript Developer.
Originally published at github.com Updated on ・2 min read

Ever encountered a situation where you had to wait for some HTML element in a webpage before you can execute a function?
Wait no more, because wait-for-it.js is at your service.

What does it offer?

It offers you a much simpler way to execute a function (callback) when your specified (selector) element gets added to the page.

How does it work?

It uses nothing else but your very own JavaScript to accomplish the task i.e. JavaScript's MutationObserver API. You can have a detailed look at its code here:

GitHub logo cstayyab / wait-for-it.js

A JavaScript Library that allows you to execute function when a certain element gets added to the document

Where can I possibly use it?

Suppose you are using an external library that makes changes to your page content and you want to execute a function when these changes are made but the library itself does not emit any kind of event.

One way to handle this problem is that you make your own copy of the library and edit that library to suit your need but there can be different restrictions with this approach. For example,

  1. You might have to manually update your version every time the library is updated.
  2. That library some how restricts you to use it when it's not being used from their server.

In scenarios such as mentioned above the only code you can control is yours. So what you can do is that you include wait-for-it.js in your code which can wait for changes to content and if the CSS selector you have specified appears, it will simply run the callback function you have specified. This way even if that particular library is updated you won't have to make any changes to your code.

How do I use it?

Step 1: Include it in your webpage using jsDelivr CDN

<script src="https://cdn.jsdelivr.net/gh/cstayyab/wait-for-it.js@0.1.1/wait-for-it.js"></script>
Enter fullscreen mode Exit fullscreen mode

Step 2: Register a selector to listen:

waitForElement('#food', function () {
    alert("Your Food is Here!");
});
Enter fullscreen mode Exit fullscreen mode

Step 3: Voilà!!


Update v0.1.1

Now you can specify a third parameter timeout to waitForElement. If the specified element does not appear in the given time, your callback function will be called with a timeout = true argument instead and the selector will also be removed from the queue. Here is an example:

waitForElement('#NonExistentSelector', function (timeout) {
    if(timeout === true) {
        console.log('As Expected, Element with #NonExistentSelector did not appear in 1000 milliseconds.');
        return;
    }
    console.log('This is not possible at all!');
}, 1000);
Enter fullscreen mode Exit fullscreen mode



Feel free to star and fork it on GitHub

Discussion (9)

Collapse
jasonf profile image
Jason F

Can you please give some use case/s and example/s?

Collapse
cstayyab profile image
Muhammad Tayyab Sheikh Author

Hi Jason!
Thanks for pointing it out. I have updated the article.

Collapse
amilight profile image
Amit Kumar Gupta

I have not used this library but used Intersection observer for few many instances as DOMNodeInserted event is deprecated:

(i) Show a spinner before your Content UI is present inside of DOM
(ii) Had to scroll to a UI part once page loaded with certain hash param

I'll dig into this library but you must start looking IO for sure :)

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited

Can you explain this JavaScript to me in your source code?

cb = observeNodes[selector].pop();
cb();
Enter fullscreen mode Exit fullscreen mode

I never saw that you can call something that is eighter a variable or a function, why not

const cb = observeNodes[selector].pop();
cb();
Enter fullscreen mode Exit fullscreen mode

Also is this library usable for React? Or only Vanilla JS?

Thanks

Collapse
cstayyab profile image
Muhammad Tayyab Sheikh Author • Edited

A reference to function is being stored in observerNode[selector] and pop is being used to get that reference and store into cb (callback) hence when you call cb it actually calls that function. And yes it is a very valid syntax in JavaScript.

I have only tested it fir Vanilla JS

Collapse
raddevus profile image
raddevus

Very interesting idea and nice short source code. I'll try this out soon. Thanks for writing this up. If you get a chance it would be interesting to see your explanation of the actual wait-for-it source code also. Thanks again.

Collapse
cstayyab profile image
Muhammad Tayyab Sheikh Author

I surely will explain it more and also improve it over time.

Collapse
monfernape profile image
Usman Khalil

Cool idea. Way to go

Collapse
ivanjeremic profile image
Ivan Jeremic

Is step 2 still valid since the update?

Forem Open with the Forem app