wait-for-it.js is a JavaScript library that allows you to implement the function when adding a specific element to the document that runs a function when an item is added to the DOM. Based on the MutationObserver API.

Js uses the HTML MutationObserver to wait for the parameters recorded in it. Whenever an item is added to the document if the registered setting is checked and if it finds an item using this specifier, it executes the callback function and removes this callback from its queue to prevent re-excitation.

wait for element to be available javascript, mutationobserver, javascript wait for element to render, jquery wait for element to be visible, wait for element to exist

Have you encountered a situation where you had to wait for some HTML element in a webpage before it could perform a job?

Wait no longer, because wait-for-it.js is at your service.

What do you offer?

It provides you a much simpler way to implement the (callback) function when the selected (selected) element is added to the page.

How does it work?

It uses nothing other than your JavaScript to get the job done, like the MutationObserver API.

Where can I use it?

Suppose you are using an external library that makes changes to the content of your page and you want to implement functionality when making these changes but the library itself does not issue any kind of event.

One way to deal with this issue is to create your own copy of the library and edit that library to suit your needs but there can be various limitations with this approach. For example,

• You may have to manually update your version every time the library is updated.
• This library restricts you in some way to use it when it’s not being used by their server.

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

<script src="wait-for-it.js"></script>

<button class="btn" id="example">Example Button</button>

waitForElement('#example', function () {
  console.log('The Example Button Has Been Added To The Document!');
});

waitForElement('#example', function (timeout) {
  if(timeout === true) {
    console.log('As Expected, Element with #example did not appear in 2000 milliseconds.');
    return;
  }
  console.log('The Example Button Has Been Added To The Document!');
}, 2000);

Official Website(cstayyab): Click Here

This superior jQuery/javascript plugin is developed by cstayyab. For extra Advanced Usages, please go to the official website.