Wait for all elements to exist

Question

I am using a plugin that generates dynamic content. I need to modify the content so I am using this function to wait until the elements exist:

var counter = 50;
var checkExist = setInterval(function () {
    console.log(counter);
    counter--
    if ($('.title').length || counter === 0) {

        // Insert font awesome arrow
        $('.title').append('<i class="fa fa-angle-up"></i>');

        clearInterval(checkExist);
    }
}, 200);

This works perfectly fine for one element but I need to use it on multiple elements but it only runs once.

var counter = 50;
var checkExist = setInterval(function () {

    counter--
    if ($('.title').length || counter === 0) {

        // Insert font awesome arrow
        $('.title').append('<i class="fa fa-angle-up"></i>');

        clearInterval(checkExist);
    }

    if ($('.cartcount').length || counter === 0) {

        // Set text to 0
        $('.cartcount').text('0');

        clearInterval(checkExist);
    }

}, 200);

How can I clean this up so I can wait for any number of elements to exist before executing my code?

Usually that would be done with [callbacks](https://stackoverflow.com/questions/824234/what-is-a-callback-function) — Lapskaus, Jun 12 '20 at 14:13
Use event listeners, it's a bad practice to use timers in your case — HYAR7E, Jun 12 '20 at 14:14
Not really, because you do not show us your HTML or the elements that get created, consider this [fiddle](https://jsfiddle.net/m1s7vpqk/1/). You create the elements in the `appendElements` function and you give that function the callback `afterDone`. That function is the last call in your `appendElements` function — Lapskaus, Jun 12 '20 at 14:40
The plugin creates multiple elements and I have no control over them, I can only wait until they exist. I tried to use a simplified code example. I'm waiting for the title element to exist before appending a font awesome icon to. I'm also waiting for the cart count element to exist so I can set it to 0. — Junky, Jun 12 '20 at 14:56
If this plugin is editable, I would suggest you to create a boolean var with false value at the start of code and change its value to true at the end of code. In your own code, you can test if it's finished and do some work. It's impossible to give you any code because we don't know how this plugin works. — Éder Rocha, Jun 12 '20 at 15:31

score 1 · Accepted Answer · answered Jun 12 '20 at 18:10

As Lapskaus suggested, I was able to achieve what I needed with the following code.

// Wait for Menu elements to be created
var waitForEl = function (selector, callback) {
    if (!jQuery(selector).size()) {
        setTimeout(function () {
            window.requestAnimationFrame(function () { waitForEl(selector, callback) });
        }, 100);
    } else {
        callback();
    }
};

waitForEl('.title', function () {
    // Insert font awesome arrow
    $('.title').append('<i class="fa fa-angle-up"></i>');
});

waitForEl('.cartcount', function () {
    // Set text to 0
    $('.cartcount').text('0');
});

Wait for all elements to exist

1 Answers1