jQuery : how to indent a infinite loop?

Question

Here what's happening. I wish to store some data from multiple lists on Twitter. Each request return 20 array max, so if the list have more than 20 members you have to do multiple requests (using the cursor attribute to get the next one). So i thought : infinite loop to call and parse the json.

Basically what i want to do : call the first json(with cursor value set to -1) and stock the data. Then call the second json (with cursor value = to next_cursor_str value of the previous json). Then call the third one... etc and stop if the loop if the next_cursor_str value = 0 (that mean it's the last json). That was my first draft :

var interval = setInterval(function(i){ /*start the loop*/
    if (i==1) {var cursor = '&cursor=-1'} else {var cursor = '&cursor='+json.next_cursor_str+''} /* set the value of cursor ine the request. The first request have to be cursor=-1*/
        var url='twitter-proxy.php?url='+encodeURIComponent('lists/members.json?owner_screen_name=flavienhamon&slug=lexpress&skip_status=true'+cursor+''); /*Make the request*/
            $.getJSON(url, function(json) { processData(json); /*store data for processing*/ console.log(json); 



    if (json.next_cursor_str == 0) {window.clearInterval(interval);}; /*stop the loop if*/
            });   
},5000); /*end of loop fonction*/       

The infinite loop work, has the stop event. But i can't set the first json being call to be the "cursor=-1" and '&cursor='+json.next_cursor_str+'' doesn't work since json as not being define yet.

So i make a few change :

var url='twitter-proxy.php?url='+encodeURIComponent('lists/members.json?owner_screen_name=flavienhamon&slug=lexpress&skip_status=true&cursor=-1'); /*call manually the first json*/
  $.getJSON(url, function(json) { processData(json); console.log(json); NombreCompteJ1 = json.users.length;
    var interval = setInterval(function(i){ /*start the loop*/
            var url='twitter-proxy.php?url='+encodeURIComponent('lists/members.json?owner_screen_name=flavienhamon&slug=lexpress&skip_status=true&cursor='+json.next_cursor_str+''); /*Make the request*/
                $.getJSON(url, function(json) { processData(json); /*store data for processing*/ console.log(json); 



        if (json.next_cursor_str == 0) {window.clearInterval(interval);}; /*stop the loop if*/
                });   
    },5000); /*end of loop fonction*/       

});     

This time, the first json is call and proccess without a problem. Then the loop start to call the second json, process it, and... call the second one again.

console capture : http://img811.imageshack.us/img811/223/infiniteloop.png

&cursor='+json.next_cursor_str+' call the next_cursor_str value of the first json, again, and again, instead of calling the value of the previous element of the loop.

Someone can explain how to fix this ? I'm learning jQuery and JS since two days, i'm reading a lot, but i can't find anything on this. I could use a hand to learn !

Answer 1

Use setTimeout() instead of setInterval(), so you can pass a closure with the updated cursor each time. And define your code as a named function so you can call it in the setTimeout().

function getData(cursor) {
    var url='twitter-proxy.php?url='+encodeURIComponent('lists/members.json?owner_screen_name=flavienhamon&slug=lexpress&skip_status=true&cursor='+cursor);
    $.getJSON(url, function(json) {
        processData(json);
        console.log(json);
        var next_cursor = json.next_cursor_str;
        if (next_cursor != 0) {
            setTimeout(function() { getData(next_cursor); }, 5000);
        }
    });
}

Start the loop with:

getData(-1);