closure inside a for loop - callback with loop variable as parameter [duplicate]

Question

I am using jQuery "GET" in a loop to obtain several results from the server. I want to include the loop index as a fixed parameter to the call back but its not working.

(I followed the advice of this article on how to do it.)

However, the value I get in the call back is completely not what I expect – rather than each loop index value, it is always equal to the exit value of the index.

ie. the code fragment here prints out '16' for each execution of the callback. How do I get it to print 1, 2, 3... (I realize the order might be different, that's fine)

In addition to the code below, I've tried several ways to specify the call back function, eg. function(data, textStatus) { return test(data, textStatus, idx); }, 'text'); etc.

How is this supposed to work?

function test(data, textStatus, siteNo)
{
    console.log("siteNo=" + siteNo);
}

function loadConfigLists()
{
    var siteReport;
    // retrieve site configuration
    jQuery.get("svGetSiteConfig.php", function(data, textStatus) 
    {
        // retrieve port configuration for all sites
        for (var idx=1; idx<=15; idx++)
        {
            var probeIP = siteConfigArray[idx].siteIP;
            if (probeIP != "" && probeIP != null)
            jQuery.get("svGetPortInfo.php?svSiteIpAddr=" + probeIP+"&s="+idx, 
                    function(data, textStatus) { test(data, textStatus, idx); }, 'text'); 
            else // IP value is blank
                siteConfigArray[idx].portManifest = null;
        }
        }
    }, 'text'); 
}

Wist

Answer 1

This is a pretty standard problem with closures. When you do this:

function(data, textStatus) { test(data, textStatus, idx); }

You're binding a reference to idx but not to the value of idx. So, by the time your callback gets called, the loop will have finished and idx will be 16 in all of the callbacks that you bound.

The usual solution is to force evaluation of idx through a function call:

function build_callback(idx) {
    return function(data, textStatus) {
        test(data, textStatus, idx);
    };
}

// And then...

jQuery.get("svGetPortInfo.php?svSiteIpAddr=" + probeIP+"&s="+idx, build_callback(idx), 'text');

You can also inline the function with a self-executing function if you want to keep it all together:

for (var idx=1; idx<=15; idx++)
    (function(idx) {
        var probeIP = siteConfigArray[idx].siteIP;
        if (probeIP != "" && probeIP != null)
            jQuery.get("svGetPortInfo.php?svSiteIpAddr=" + probeIP+"&s="+idx, 
                function(data, textStatus) { test(data, textStatus, idx); }, 'text'); 
        else // IP value is blank
            siteConfigArray[idx].portManifest = null;
    })(idx);

The function call gives you the value of idx when the function is called and that's the value of idx that you want.

Earing

Thanks, I found an even more handy way is to turn every function() { blahblah that uses var i} into (function(ii){return function(){ old code but changes i to "ii" }})(i); – Seed