jQuery.each和普通for循环之间的javascript / jquery范围差异？

Question

Interesting issue here, optimising some code but am having trouble with scope issues using a javascript loop as opposed to a jQuery loop.

If for example we have 3 "decade" iterations, with values "1950", "1960", and "1970", using the javascript loop, we would get "1970" (the last iteration in the loop) all the time on the "alert" of decade.name, but using jQuery.each we get the expected value for each created element.

Questions: - why does this work with jQuery.each and not regular javascript loop? - how can i make this work with a normal javascript for loop?

$.ajax({
    async: true,
    type: 'post',
    url: 'ajax/products.php',
    data: {
        'action': 'get_filter_decades',
        'data': {
            "search_term": ple.find('input[name="search_term"]').val(),
            "first_letter": $.bbq.getState('first_letter'),
            "category_id": categoryId.val(),
            "original_release_year_range": ple.find('input[name="original_release_year_range"]').val()
        }
    },
    success: function (jsonResponse) {
        if (jsonObj = handleJsonResponse(jsonResponse)) {
            var filterDecadesResultList = filterDecades.find('ul.decade_result_list');
            filterDecadesResultList.hide();
            filterDecadesResultList.empty();

            var originalReleaseYearRange =     $(ple.find('input[name="original_release_year_range"]'));

            // jquery loop
            //$( jsonObj.data.decades ).each( function( i, decade ) {

            // javascript loop (faster!)
            var decadesLength = jsonObj.data.decades.length;
            var listElement;
            var linkElement;
            var decade;

            for (var i = 0; i < decadesLength; i++) {
                decade = jsonObj.data.decades[i];
                listElement = $('<li />');
                linkElement = $('<a />');
                linkElement.text(decade.name);

                if (decade.product_count > 0) {
                    linkElement.append(' (' + decade.product_count + ')');
                    if (decade.selected) {
                        linkElement.addClass('selected');
                    }
                    linkElement.on("click", function () {
                        alert(decade.name);

                        if (!linkElement.hasClass('selected')) {
                            originalReleaseYearRange.val(decade.name);
                            $.bbq.pushState({
                                'original_release_year_range': decade.name
                            });
                            productListPaginate(ple);
                        } else {
                            originalReleaseYearRange.val('');
                            $.bbq.removeState('original_release_year_range');
                            productListPaginate(ple);
                        }
                    });
                }

                listElement.append(linkElement);
                filterDecades.find('ul.decade_result_list').append(listElement);
                // jquery loop
                //});

                // javascript loop
            }

            filterDecadesResultList.show();
        }
    }
});

Answer 1

jQuery.each is a function, and Javascript functions are scoped automatically, ie when they go away, so do all the variables within them. Pure Javascript for loops, however, are not scoped because it's a flow control -- it looks like a contained unit, but it's no different in principle than any other keyword or statement.

There's nothing that can be done to make a for loop scoped like jQuery.each other than putting it within something like an anonymous function:

(function(){
    for (i=0; i<10; i++) {
        // do something
    }
})();

But that doesn't really change the behavior of the for loop, it just encapsulates the namespace so nothing survives after the anonymous function (and the for loop inside) executes.

Answer 2

Consider the following sample: http://jsfiddle.net/9vZUg/1/

var years = [2010, 2011, 2012];
for (var i=0; i<years.length; i++) {
    var year = years[i];
    var input = document.createElement("input");
    input.type = "button";
    input.value = year;
    input.onclick = function(){
        alert(year); // at this point year will be always be 2012
    }
    document.body.appendChild(input);
}​

That happens because we create function at one point but use it later on. And at the moment we are calling it year is always 2012 as it was on the last iteration. How can we fix it? Create closure:

var years = [2010, 2011, 2012];
for (var i=0; i<years.length; i++) {
    (function(){
        var year = years[i];
        var input = document.createElement("input");
        input.type = "button";
        input.value = year;    
        // now year is stored here and would be unique for each handler
        input.onclick = function(){
            alert(year);
        }
        document.body.appendChild(input);
    })();
}​