带有异步代码的循环中的JavaScript闭包

时间:2013-11-15 20:54:54

标签: javascript jquery ajax

我有一个数组,其中包含两个Web服务的URL。以下代码正确执行两个帖子并将正确的数据打印到屏幕上。但有趣的是,该函数只会向控制台打印"2",但它会在每个请求中正确打印出正确数量的对象,屏幕上限: enter image description here

您可以看到每个AJAX请求返回的对象数量不同。

 $(document).ready(function () {
            var urlList = ['../NewService.asmx/GetNames', '../NewService.asmx/GetPersons'];
            //executes both functions
            multipleAjaxCalls(urlList);
            //ajax function definition 
            function multipleAjaxCalls(array) {
                var functionArray = [];
                for (var i = 0; i < array.length; i++) {
                    var func = (function () {
                        $.ajax({
                            type: "POST",
                            url: array[i],
                            dataType: "json",
                            contentType: "application/json",
                            success: function (data) {
                                console.log('this is the index: ' + i);
                                console.log('ajax success ' + i);
                                console.log(data.d);
                            },
                            error: function (xhr) {
                                console.log(xhr.status);
                            }
                        })
                    })(i); //<--I honestly don't understand what passing paramters to these closing parens actually does
                           //in this case it doesn't affect the output
                    functionArray.push(func);
                }
                return functionArray //this is superfluous
            }
        });

为什么这个函数正确地返回两组数据,但只打印出"2"的索引,特别是当数组的LENGTH为2时?

2 个答案:

答案 0 :(得分:0)

你这样做

(function(){
  // stuff
})(something)

你应该这样做

(function(something){
  // stuff
})(something)

否则,如果你创建一个闭包没关系,你仍然没有将i传递给它。

答案 1 :(得分:0)

修复

              function (yetanotherI) {
                    $.ajax({
                        type: "POST",
                        url: array[yetanotherI],
                        dataType: "json",
                        contentType: "application/json",
                        success: function (data) {
                            console.log('this is the index: ' + yetanotherI);
                            console.log('ajax success ' + yetanotherI);
                            console.log(data.d);
                        },
                        error: function (xhr) {
                            console.log(xhr.status);
                        }
                    })
                })(i)

您将i的值传递给anony函数但未使用它。我改变了。

这就是它的工作方式......在循环完成之前不会调用内部函数,所以当它被调用i时(外部函数)总是2。