JS/ jQuery while loop until dom element is loaded

Question

I am using a tabscript, which doesn't have a success handler, after it loaded the wanted page into the opened tab.

Now I want to edit the content on the client side, after the element was loaded, which would be usually done in an asynchronous function - but due to the fact that the tabscript I am using doesn't have an success handler this approach doesn't work.

This is a working solution, but it's way to slow and could end in an endless loop:

open_URL_in_tab();

while(true){
    if($('#part_of_loaded_page'){
        $('#part_of_loaded_page').editContent();
        break
    }
}

Thanks for your advice :)

looping like that eats the process threads for the browser. you'd be better off using something like setTimeout running every 10+ milliseconds. if the dom element is not ready, simply call setTimeout again with the same parameters. w3schools.com/jsref/met_win_settimeout.asp — ps2goat
– ps2goat, Commented Dec 18, 2013 at 21:09
you can always add a success function to the tabscript you have. Or have the tabscript fire a custom event when it is done loading then you can bind to that event to do what you want — Huangism
– Huangism, Commented Dec 18, 2013 at 21:11
I cant write a success funtion, because the license prohibits changes in the tab source... — Niczem Olaske
– Niczem Olaske, Commented Dec 18, 2013 at 21:13
@nietonfir I know there's a controversy, but I don't care. If it gets the point across, I'll link to it. — ps2goat
– ps2goat, Commented Dec 18, 2013 at 21:13

Cliff Ribaudo · Accepted Answer · 2013-12-18 21:14:49Z

1

You can try something like this:

 var intervalId = undefined;
 open_URL_in_tab();
 intervalId = window.setInterval(editContent, 500);

Call this when you are done:

 window.clearInterval(intervalId);

answered Dec 18, 2013 at 21:14

Cliff Ribaudo

9,0592 gold badges60 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

nietonfir Over a year ago

The usage of setInterval() is generally frowned upon as it mostly doesn't work as expected and can trigger some interesting side-effects.

Cliff Ribaudo Over a year ago

really got a link to that... I'd be interested to see more

MattDiamant Over a year ago

setInterval works perfectly fine for his answer. setTimeout is not generally frowned upon.

nietonfir Over a year ago

Just google it or read it up (e.g. Javascript Ninja). First hit on SO: stackoverflow.com/a/731625/838733

Cliff Ribaudo Over a year ago

Well I guess there is this, but I wouldn't say they are 'frowning' upon it... stackoverflow.com/questions/729921/settimeout-or-setinterval and Id appreciate if people don't downvote when it simply a matter of opinion... wrong answer, yeah downvote that mo fo, but opinion.. no.

|

nietonfir · Accepted Answer · 2013-12-18 21:15:15Z

1

As already mentiond, the while loop won't work efficiently, but timers will help you.

(function() {
    function checkState() {
        var success = false; // do something to check the state
        if (!success) {
            setTimeout(checkState, 50);
        }
    }
    setTimeout(checkState, 50);
})();

answered Dec 18, 2013 at 21:15

nietonfir

4,8916 gold badges34 silver badges46 bronze badges

Comments

Abdennour TOUMI · Accepted Answer · 2014-09-07 09:03:16Z

1

You can use our pluginreadyx as following :

$('#waitme').readyx(function(){
   //code to run after element loading
  // $(this).css("data-status","ready"); .....
},30);

demo here

answered Sep 7, 2014 at 9:03

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Collectives™ on Stack Overflow

JS/ jQuery while loop until dom element is loaded

3 Answers 3

7 Comments

Comments

demo here

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

demo here

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related