Wait for an element to exist on the page with jQuery

wait-el.js

var waitForEl = function(selector, callback) {
  if (jQuery(selector).length) {
    callback();
  } else {
    setTimeout(function() {
      waitForEl(selector, callback);
    }, 100);
  }
};

waitForEl(selector, function() {
  // work the magic
});

@MasterMindNET
how can maxTimes > 0 even work? 0 is false and 1 true or am i missing something?!

Do most of these actually work? I think it will always spit out false because as far as i understand, when DOM is loading and the selector is not there it will be declared as null, its nothing its not there.

Perhaps it will work if the selector is again declared within the timer. Wouldnt it read the tree again and then see it is there?!
I tried a couple of the examples above using a class which gets added when content is loaded into a div. None of them work, they only work if the class is there from the start.

EDIT
Tried my findings and now it does worl. Im no developper or full-time coder. So i properly made lots of mistakes. But now the code works how i want it too.

var selector = $(".tabs-component");
var count = 0;
var waitForEl = function(selector, callback) {
    var selector = $(".tabs-component");
    // if(!count) {
    //     count=0;
    // }
    count++;
    console.log("count: " + count);
    if (selector.length) {
        callback();
        console.log("Yeah");
    } else {
        setTimeout(function() {
            waitForEl(selector, callback);
        }, 1000);
    }
};

waitForEl(selector, function() {
    // work the magic
    console.log("Yeah2");
});

Below screengrabs as a test. original code kept counting, my adjsut shows it see the selector after a while because i declare the name over and over again. Ive seen this behavior before and i believe its well known. Just dont understand why none of the above example think about that?

@MasterMindNET
how can maxTimes > 0 even work? 0 is false and 1 true or am i missing something?!

please try this example:

https://jsfiddle.net/65otf4mL/
or source code:
https://hastebin.com/opaxacawoc.typescript

I will try to answer your questions a bit later!

(maxTimes != false) && maxTimes-- ;

The value will be decremented (maxTimes--) if it is not null, undefined, 0, false.

Thanks for making the example! I got one of the examples working, by declaring the bar for the missing selector in each loop. Otherwise it won't work.

I prefer using a timeout value, so I modified the proposed answer as follows:
This will time out by default after 1 second, or never if a value of 0 is provided.
You can see a codepen here.

var waitForElement = function( selector, callback, interval, timeout )
{
    if( parseInt( timeout ) !== 0 )
    {
        timeout = !isNaN(parseInt(timeout)) || 1000;
    }
    interval = !isNaN(parseInt(interval)) || 100;
    var time = 0;
    var poll = setInterval(function()
    {
        var el = $(selector);
        if( typeof( timeout ) !== 'undefined' && time >= timeout )
        {
            clearInterval( poll );
            return;
        }
        // Try again
        else if( el.length < 1 )
        {
            time += interval;
            return;
        }
        clearInterval( poll );
        callback( el );
    }, interval);
};

View short and full

//Check
let check = (e, m, t, c) => { //(element, max, timeout, callback)
    let i = +m,
    loop = () => { $(e).length ? c() : --i && setTimeout(() => { loop() }, t) }
    loop()
},            
//Process
myFunc = () => { //Do something }
//Usage
check("element", 30, 500, myFunc)

Works very well! Thank you! You are a life saver to my project

Thank you!
I set maxTimes to 100. After 100 tries, it will stop.

jQuery(document).ready(function () {
    var selector = '#element';
  
    var waitForEl = function (selector, callback, maxTimes = false) {
      if (jQuery(selector).length) {
        callback();
      } else {
        if (maxTimes === false || maxTimes > 0) {
          maxTimes != false && maxTimes--;
          setTimeout(function () {
            waitForEl(selector, callback, maxTimes);
          }, 100);
        }
      }
    };
  
    waitForEl(selector, function () {
        jQuery(selector); // do something with selector
    }, 100);
});