Perform the Function When a Specific Item is Added to the Document | wait-for-it.js

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.

Read More – A JavaScript Library That Extracts Text From Documents

What do you offer?

It provides you with 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 those 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.

How to make use of it:

1. Download and embody the wait-for-it.js library on the web page.

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

2. Invoke a callback function when a component is added to the doc.

<button class="btn" id="example">Example Button</button>
waitForElement('#example', function () {
  console.log('The Example Button Has Been Added To The Document!');
});

3. Return an error if the goal element has not been added to the web page within a specified time.

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);

Wait For An Element To Be Added To The Document, wait-for-it.js Plugin/Github, javascript wait until variable exists, javascript wait until function exists

Read More – 

Convert Markdown Documents to Slides | morph
Animated Page Scrolling To Specific ID Within Document With jQuery


See Demo And Download

Official Website(cstayyab): Click Here

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

Share