Question

I have this recursion loop where inside the function I have atleast 2 ajax get/post, and the recursion happens after the first ajax get. my function structure is like this,

function Loop() {
    $.get(url, data, function(result) {
        for loop to render the result {
            // render the result here
        }
        for loop to get another data using the result {
            $.post(url, result.data, function(postResult) {
                // I don't know what it did here since 
                // I don't have an access to this post
            });
            // is there a way here that i will not proceed if the post is not done yet?
        }
        setTimeout("", 1000); // I wait for 1 second for the post to finish
        Loop(); // call the recursion
    }, "json");
}

can anyone tell me what’s wrong with this code? why do i get a warning from the computer that my script is causing the computer to run slowly. I know that this code is the one causing it, but I don’t know the work around.

I know inside the second loop inside the get is causing a lot of memory. Is there a way that it will not loop back if the ajax post is not finished?

Answer 1

Your setTimeout will not neatly pause the code for one second: it will just set a timer for an (empty, in your case) event to go off after a certain time. The rest of the script will continue to execute parallel to that.

So you’re currently calling your recursion function a lot more frequently than you think you are. That’s your first problem.

Your biggest problem, though, is that regardless of what you’re doign in the result of your post, that’s in another scope entirely, and you cannot break out of the Loop function from there. There is nothing in your code to break the recursion, so it is infinite, and very fast, and it sends off Ajax requests on top of that.

You need to describe in more detail what you want to achieve, and perhaps somebody can show you how you should do it. The only thing that is certain is that you need to use callbacks. I’ve written an example but it’s making a lot of assumptions. It’s a lot of approximations of what I think you might want to achieve, but no doubt you’ll need to tweak this a bit to fit your needs. Hopefully it’ll give you an idea of the workflow you need to use:

function Loop() {
    $.get(url, data, function(result) {
        for loop to render the result {
            // render the result here
        }

        // this is what you're looping over in your second loop
        var postQueue = result.someArray;

        renderChildData(postQueue, 0);
    }, "json");
}

function renderChildData(array, index) {

   // this is just one item in the loop
   var currentItem = array[index];

   $.post(url, currentItem, function(postResult) {

       // we have received the result for one item
       // render it, and proceed to fetch the next item in the list

       index++;
       if(index < array.length) {
          renderChildData(array, index);
       }

   });
}