"Let me wait-for-it and call you back", said wait-for-it.js
Tags: javascript, showdev, html, css
Published: 2021-05-07 00:26:09

---
title: "Let me wait-for-it and call you back", said wait-for-it.js
description: A JavaScript Library that allows you to execute function when a certain element gets added to the document
tags: javascript, showdev, html, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6smunixjeaxjojlqi8sg.png
canonical_url: https://github.com/cstayyab/wait-for-it.js
published: true
---

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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target="_blank">`MutationObserver` API</a>. You can have a detailed look at its code here:
{% github cstayyab/wait-for-it.js no-readme %}

## 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
```html
<script src="https://cdn.jsdelivr.net/gh/cstayyab/wait-for-it.js@0.1.1/wait-for-it.js"></script>
```

**Step 2:** Register a `selector` to listen:
```js
waitForElement('#food', function () {
    alert("Your Food is Here!");
});
```

**Step 3:** Voilà!!

<hr />
## 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:

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

<hr />
_Feel free to star and fork it on <a href="https://github.com/cstayyab/wait-for-it.js" target="_blank">GitHub</a>_