带有 for 循环的 AJAX Done() 函数答案

【问题标题】：AJAX Done() function with for loop带有 for 循环的 AJAX Done() 函数
【发布时间】：2013-09-08 19:17:14
【问题描述】：

我有一个 for 循环，它遍历一个包含 3 个值（不同的报告编号）的数组，并为每个值发送一个 AJAX 请求。我希望 .done() 函数对返回的每个报告表现不同。但是，我不确定如何使报告编号可用于 done 功能。如果我没有将报告编号作为参数传递给 done() 函数，那么它总是认为报告编号是“190”，即数组中的最后一个值。如果我确实将其传入，如下所示，它显示为未定义。

function runQueries(request, data) {
    var reports = ['103', '187', '190'];
    for (i=0; i < reports.length; i++) {
        var report = reports[i];
        $.ajax({
        url: request + '&reportType=' + report},
        data: data
        })
        .done(function(response, textStatus, jqXHR, report) {
            if (report === '187') {
            ...
            }
            else if (report === '190'( {
            ...
            }

【问题讨论】：

标签： javascript jquery ajax for-loop

【解决方案1】：

report 的问题正在发生的变化比您的请求完成得更快。您可以通过关闭来避免这种情况。请记住，这不会按顺序发生。

var reports = [ 1, 2, 3 ];

for( var i = 0; i < reports.length; i++ ){
    var report = reports[i];
    console.log(report);
    (function(report){
        $.ajax({
            url: '/echo/html',
        }).done(function(){
            switch( report ){
                case 3: console.log('Three!'); break;
                case 2: console.log('Two!'); break; 
                case 1: console.log('One!'); break;
            }
        });
    })(report);
}

这是一个小提琴：http://jsfiddle.net/2ArxZ/

如果您不想在循环中创建函数，可以使用它然后在循环中调用它。

function getReport( report ){
  return function(){
    $.ajax({
        url: '/echo/html',
    }).done(function(){
        switch( report ){
            case 3: console.log('Three!'); break;
            case 2: console.log('Two!'); break; 
            case 1: console.log('One!'); break;
        }
    })();
  }
}

您也可以简单地使用 $.each 代替，但了解闭包会有很大帮助，所以我走了很长的路！

【讨论】：

【解决方案2】：

闭包和范围：

function runQueries(request, data) {
    var reports = ['103', '187', '190'];
    for (i=0; i < reports.length; i++) {
        (function(report) {
            $.ajax({
                url: request + '&reportType=' + report},
                data: data
            }).done(function(response) {
                if (report === '187') {
                      ...
                } else if (report === '190'( {
                      ...
                }
            });
         })(reports[i]);
    }
}

done() 方法是异步的，因此在触发时，循环早已完成。

您也可以只使用$.each 进行迭代。

【讨论】：