JS does not work on first boot - works after upgrade

Question

I am doing it quite simply in JS: I am testing if an element (based on class name) contains a string.

I think the reason it doesn't work is because the element is displayed on the page via an HTTPS request, separate for the onload event. (Type like inline / iFrame type).

An example script that I have:

(function($) {

//Only run on a specific page.
if(window.location.href.indexOf("SpecificPageImRunningOn") > -1) {

    //Wait for 3 seconds before running this script, to allow content to load
    setTimeout(function(){

        //Check if a class contains a string "Foobar"
        if($('.aSpecificClass').text().indexOf('Foobar') != -1){
            alert("Yes!");
        }
        else{
            alert("No!");
        }

    }, 3000);

}

})(jQuery);

When I test this first time (a new browser-cleared cache), it does not work properly.

As soon as I update, it works fine.

I tried to start the function manually (by clicking the button after everything loaded), and it still does not behave differently. It did not work at all on the first boot.

I also tried to make one forced update by setting a cookie, and this does not seem to make any difference.

, - !

Answer 1

, window.model(, , ) 100 , .

:

(function($) {

//Only run on a specific page.
if(window.location.href.indexOf("SpecificPageImRunningOn") > -1) {

    function holdOnRecheck() {
        //check if window.model has been defined and that it is not Null before running code. If conditions are not met, wait for 100ms then run the function holdOnRecheck again.
        if (window.model !== undefined && window.model !== null)
        {
            //window model has loaded - good. Now check if the content we are targetting in particular within the model has loaded (judging by its length). If not, wait for 100ms then run the function holdOnRecheck again.
            if (window.model.ABC.length > 0)
            {
                //If you got this far, it safe to assume that the content has loaded within the model, so you can run whatever you want on the content and it should do something.
                if($('.aSpecificClass').text().indexOf('Foobar') != -1){
                    alert("Yes!");
                }
                else{
                    alert("No!");
                }
                //finish by hiding loading spinner
                document.getElementById("loading").style.display = "none";
            }
            else
            {
                window.setTimeout(holdOnRecheck, 100); 
            }
        }
        else
        {
            window.setTimeout(holdOnRecheck, 100); 
        }
    }   

}
})(jQuery); 

Answer 2

, , . , , .

script , body $(document).ready() callback , DOM .

Answer 3

@Shomz, setTimeout - , . :

jQuery

//Only run on a specific page.
if(window.location.href.indexOf("SpecificPageImRunningOn") > -1) {
   $(function() {
      //Check if a class contains a string "Foobar"
      if($('.aSpecificClass').text().indexOf('Foobar') != -1){
         alert("Yes!");
      }
      else {
         alert("No!");
      }
   });
}

, , , :

//Only run on a specific page.
if(window.location.href.indexOf("SpecificPageImRunningOn") > -1) {
   $(window).on("load", function() {
      //Check if a class contains a string "Foobar"
      if($('.aSpecificClass').text().indexOf('Foobar') != -1){
         alert("Yes!");
      }
      else {
         alert("No!");
      }
   });
}