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. http://www.w3schools.com/jsref/met_win_settimeout.asp — ps2goat, Dec 18 '13 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, Dec 18 '13 at 21:11
@ps2goat [Please don't link to w3schools](http://www.w3fools.com/)! — nietonfir, Dec 18 '13 at 21:12
I cant write a success funtion, because the license prohibits changes in the tab source... — Niczem Olaske, Dec 18 '13 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, Dec 18 '13 at 21:13
did you buy tabscript? if not modify it and give original developer credit. I don't see why anyone can't edit a script to improve its usage — Huangism, Dec 18 '13 at 21:15
@nietonfir is this better? https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout I'd rather have simple sample code when I'm starting out, then move up to the more advanced stuff when necessary. — ps2goat, Dec 18 '13 at 21:15
You don't have to change any source code on tabscript to write your own success handler on top of it. You are not changing any part of the source code. — MattDiamant, Dec 18 '13 at 21:19
@MattDiamant Didn't know that, thanks! But it seems like Cliff Ribaudo's attempt worked. — Niczem Olaske, Dec 18 '13 at 21:23

score 1 · Accepted Answer · answered Dec 18 '13 at 21:14

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 '13 at 21:14

Cliff Ribaudo

8,932
2
55
78

The usage of `setInterval()` is generally frowned upon as it mostly doesn't work as expected and can trigger some interesting side-effects. – nietonfir Dec 18 '13 at 21:16
really got a link to that... I'd be interested to see more – Cliff Ribaudo Dec 18 '13 at 21:17
`setInterval` works perfectly fine for his answer. `setTimeout` is not generally frowned upon. – MattDiamant Dec 18 '13 at 21:20
Just google it or read it up (e.g. Javascript Ninja). First hit on SO: http://stackoverflow.com/a/731625/838733 – nietonfir Dec 18 '13 at 21:21
1

Well I guess there is this, but I wouldn't say they are 'frowning' upon it... http://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. – Cliff Ribaudo Dec 18 '13 at 21:23
Guess the person asking this question was not frowning on it :) – Cliff Ribaudo Dec 18 '13 at 21:24
Literally from the link you posted "For less demanding uses (such as a trivial updater firing every 30 seconds or something), you can safely use either." He's not doing anything that's going to lock up the browser. He's just checking whether 1 DOM element exists every half second. – MattDiamant Dec 18 '13 at 22:22

score 1 · Answer 2 · answered Dec 18 '13 at 21:15

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

score 1 · Answer 3 · answered Sep 07 '14 at 09:03

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 07 '14 at 09:03

Abdennour TOUMI

87,526
38
249
254

JS/ jQuery while loop until dom element is loaded

3 Answers3

demo here