jQuery For Loop with Post Not Counting Correctly

Answer 1

I think that's because the for loop body is not a scope for the callback function closure, the scope is the container function.

Try this:

function loadEstimates(option){
    for(term_length=72; term_length>=24; term_length-=12){
        postProcess(term_length);
    }
}

function postProcess(term_length) {
        var post_options = {loadEstimates: 'true', coverage_option:option, term_length:term_length};
        $.post('../includes/process.php', post_options, function(response, status){
            alert(term_length);
        });
}

For more info see:

• http://www.mennovanslooten.nl/blog/post/62
• http://www.javascriptkit.com/javatutors/closures.shtml
• http://en.wikipedia.org/wiki/Closure_%28computer_science%29

Answer 2

Using an index variable that counts backwards by 24's is prone to error. Instead, use a normal index, then calculate the term_length. Next, you can use an array to store the results. However, if the callback hasn't completed running, the array won't yet hold all the results. Lastly, you need to make a copy of the loop variable to escape the closure. Example:

function loadEstimates(option) {
    for(i = 0; i < 5; i++) {
        var resultsIndex = i;
        var term_length = 72 - (i * 12);
        var post_options = {loadEstimates: 'true', coverage_option:option, term_length:term_length};

        $.post('../includes/process.php', post_options, function(response, status){
            results[resultsIndex] = response;
        });
    }
}

Then, your results will be nicely aligned in the results array. The [12, 12, 12, 12, 12] side-effect caused by closure is basically caused because the last value of term_length is getting outputted every time, which is 24 - 12 = 12, due to the way the for loop modifies it and the function closes over it.

Answer 3

The problem has to do with the way for works: it uses the same variable throughout its lifespan (rather than instantiating new ones), meaning that same variable is being bound to your $.post() callback every time. AJAX calls are asynchronous, and that callback isn't being called until after your loop has finished and term_length has made its way down to 12.

For a discussion of the general problem outside of JavaScript, see "Python's lambda is broken!"

The solution, then, is to, somehow or another, get JavaScript to instantiate a new variable every iteration so it's not changed out from under you during the looping. One way to do that is to pass it through a function. See Nicolas Bottarini's answer for the code.