如何在for循环（javascript）内部的ajax调用中传递变量？

Question

使用api，我需要与第二个响应一起做出第一个响应之一，以便提供新页面。 我面临的问题是我的变量$ x总是设置为循环中最后一个＃，即在这个特定情况下为103。 这是我的代码：

$.ajax({
dataType: 'text',
type: 'post',
url: 'getAllMessages.php',
success: function(responseData) {
    var newString = responseData;
    var newerString = newString.substring(0, newString.length - 1);
    $newObject = jQuery.parseJSON(newerString);
    //console.log($newObject);
    for($x = 0; $x < $newObject.messages.length; $x++){
        $.ajax({
            data: {clientFolderId: $newObject.messages[$x].clientFolderId, messageId: $newObject.messages[$x].messageId},
            dataType: 'text',
            type: 'post',
            url: 'testapi.php',
            success: function(responseData2){
                //alert($x);
                var newString2 = responseData2;
                var newerString2 = newString2.substring(0, newString2.length - 1);
                $newObject2 = jQuery.parseJSON(newerString2);
                if($newObject2.statistics.delivered > 1000){
                    console.log($newObject.messages[$x]);
                    console.log($newObject2);
                }
            },
            error: function(responseData2){
                alert('failure in testapi.php');
            }
        });
    }
},
error: function(responseData) {
    alert('failure in getAllMessages.php');
}

}）;

Answer 1

我的直觉说将Ajax调用嵌套在另一个功能范围内（由于Matt的修正）将解决意外行为。 我已经被这个已经在循环中创建的Object创建了。 展开的作品

此处，示例＃5： http ： //www.javascriptkit.com/javatutors/closures2.shtml

遵循工程师给出的模式，

for($x = 0; $x < $newObject.messages.length; $x++){

   (function($x) {

    $.ajax({
        data: {clientFolderId: $newObject.messages[$x].clientFolderId, messageId: $newObject.messages[$x].messageId},
        dataType: 'text',
        type: 'post',
        url: 'testapi.php',
        success: function(responseData2){
            alert($x);
            var newString2 = responseData2;
            var newerString2 = newString2.substring(0, newString2.length - 1);
            $newObject2 = jQuery.parseJSON(newerString2);
            if($newObject2.statistics.delivered > 1000){
                console.log($newObject.messages[1]);
                console.log($newObject2);
            }
        },
        error: function(responseData2){
            alert('failure in testapi.php');
        }
    });

   })($x);
}

Answer 2

你所经历的就是关闭。 循环旋转时， $x的值会更新。 然而，当ajax函数抓住它时 - 它正在使用引用。 所以，正如您所发现的那样，您最终获得了最后一个值。

尝试并考虑更多功能？ 你想做什么？ 假设您正在尝试postMessage - 将其包装在函数中并传入消息。

您的代码将变得更容易阅读，并且您不会破坏您的变量。

我准备抛弃一些代码，但注意到我想澄清的一些内容 - 你在两个循环中使用索引从消息数组中获取单个消息，但是testapi.php的POST似乎正在处理单个信息？ 预计会有什么样的反应？

更新：创建了jsFiddle to Demo问题

在这里，您可以使用一些代码来帮助您。

    function correctOutputPlox(id) {
     setTimeout(function() {
       $("#output").append("<li>" + id + "</li>");
     }, 500);   
    }

    function runNicely() {
        // same loop...
        for (var x = 0; x < 10; x++) {
            // but rather than use 'x' (which is going to change, we pass it's value into a function which doesn't have access to the original 'x' since it's in a different lexical scope.
            correctOutputPlox(x);
        }
    }

    function showProblem() {
        for (var x = 0; x < 10; x++) {
            setTimeout(function() {
                $("#output").append("<li>" + x + "</li>");
            }, 500);
        }
    }

    showProblem();
    runNicely();