等待所有元素存在

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?

Answer 1

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