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

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);
    })();
}​