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

Question

这里有一个有趣的问题，优化了一些代码，但我在使用 javascript 循环而不是 jQuery 循环时遇到了范围问题。

例如，如果我们有 3 个“十年”迭代，值为“1950”、“1960”和“1970”，使用 javascript 循环，我们将得到“1970”(循环中的最后一次迭代)时间上的“警报”decade.name，但使用 jQuery.each 我们获得每个创建的元素的预期值。

问题:- 为什么这适用于 jQuery.each 而不是常规的 javascript 循环？- 我怎样才能用普通的 javascript for 循环来实现这个工作？

$.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 是一个函数，Javascript 函数会自动确定作用域，即当它们消失时，其中的所有变量也会消失。然而，纯 Javascript for 循环没有作用域，因为它是一个流控制——它看起来像一个包含的单元，但原则上它与任何其他关键字或语句没有什么不同。

除了将其放入匿名函数之类的东西之外，没有什么办法可以使 for 循环的作用域像 jQuery.each 一样:

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

但这并没有真正改变 for 循环的行为，它只是封装了命名空间，因此在匿名函数(以​​及内部的 for 循环)执行后，没有任何东西会幸存。