views:

242

answers:

3

I am aware that when coding an extension, there is no way we can delay a function call except for using a setTimeout call but here's what I am trying to achieve in a plugin that I am developing for firefox (this is not for javascript embedded into a webpage by the way):

for (var i = 0; i < t.length ; i++) {

//Load a URL from an array
//On document complete, get some data

}

The idea is simple. I have an array of URLs that I want to parse and extract some data out of. Each of these URLs take some time to load. So, if I try to get some data from the current page without waiting for the page to load, I will get an error. Now, the only way to do this as I know is as follows:

firstfunction: function() {

  //Load the first url
  setTimeout("secondfunction", 5000);

}

secondfunction: function() {

//Load the second url
setTimeout("thirdfunction", 5000);

}

And so on... I know this is obviously wrong.. I was just wondering how people achieve this in javascript...

EDIT: Sorry about not being more detailed...

+1  A: 

I'm not convinced that this type of foolery is necessary but I'm not an extension dev so who knows. If this is the approach you want, then just have the setTimeout call refer to the same function:

var index;
firstfunction: function() {
  // do something with `index` and increment it when you're done

  // check again in a few seconds (`index` is persisted between calls to this)
  setTimeout("firstfunction", 5000);
}
Michael Haren
Thanks for that... Just that I was looking for some approach that does not use the setTimeout which is a very risky function. For instance, if the page takes more than 5 seconds to load, the code will break...
Legend
You can call it multiple times. I think you're hunch that this approach is wrong is right, though, I don't know much about this area--sorry!
Michael Haren
+1  A: 

I am not sure how to do this from a plugin, but what I've done with iframes in the past is attach a callback to the target document's onLoad event.

Maybe something like:

var index = 0;  
var urls = [ ..... ];  
function ProcessDocument() { ....; LoadNextDocument(); }  
function LoadNextDocument() { index++; /* Load urls[index] */; }  
document.body.onLoad = ProcessDocument;

Somewhere in there you'd need to test for index > urls.length too for your end condition.

James Maroney
A: 

I had same problem but I used recursion instead of looping. Below is the running code which changes the innerHTML of an element by looping through the list. Hope its helpful.

<Script type="text/javascript">
var l;
var a;
function call2()
{
    l = document.getElementById('listhere').innerHTML;
    a = l.split(",");
    call1(0);
}

function call1(counter)
{
    if(a.length > counter)
    {
        document.getElementById('here').innerHTML = a[counter];
        counter++;
        setTimeout("call1("+counter+")",2000);
    }
}

</Script>

    <body onload="call2()">
    <span id="listhere">3,5,2,8</span><Br />
    <span id="here">here</span>
Deepak Yadav