javascript - 在循环中调用另一个函数完成后的函数

Question

我有一个 for 循环，我在其中调用三个函数。我需要仅在前一个函数完成后才能按顺序运行这些函数。

我尝试使用回调来实现此目的，但似乎不起作用。

代码如下:

 for(let i=0;i<boxval.length;i++){
        var value=boxval[i];
        a(value,function(returnedValue){
            b(returnedValue,function(returnedValue){
                    c(returnedValue,function(returnedValue){
                        d();
                    });
             });
        });


    }



        function a(val, callback){
            $
            .ajax({
                type : "get",
                url : "myservlet",
                beforeSend : function() {
                    $(
                            '#text1')
                            .css(
                                    {
                                        "color" : "red"
                                    });
                    $(
                            '#text1')
                            .text(
                                    "Running Graph");
                },

                data : {
                    "boxval" : val
                },
                success : function(
                        responseText) {
                    $(
                            '#text1')
                            .css(
                                    {
                                        "color" : "green"
                                    });
                    $(
                            '#text1')
                            .text(
                                    responseText);


                    callback(val);

                }
});

        }
        function b(val, callback){
            $
            .ajax({
                type : "get",
                url : "ConnectServlet",
                beforeSend : function() {
                    $(
                            '#text2')
                            .css(
                                    {
                                        "color" : "red"
                                    });
                    $(
                            '#text2')
                            .text(
                                    "Copying Files and preparing pSet");
                },
                data : {
                    "boxval" : val
                },
                success : function(
                        responseText) {
                    $(
                            '#text2')
                            .css(
                                    {
                                        "color" : "green"
                                    });
                    $(
                            '#text2')
                            .text(
                                    responseText);


                    callback(val);

                }

        });

        }
        function c(val, callback){
            $
            .ajax({
                type : "get",
                url : "CopyServlet",
                beforeSend : function() {
                    $(
                    '#text3')
                    .css(
                            {
                                "color" : "red"
                            });
            $(
                    '#text3')
                    .text(
                            "Running Dynamic Diff Graph");
        },
        data : {
            "boxval" : val
        },  
        success : function(
                responseText) {
            $(
                    '#text3')
                    .css(
                            {
                                "color" : "green"
                            });
            $(
                    '#text3')
                    .text(
                            responseText);


            callback(val);


        }
        });
        }

        function d(){
            $(
            '#summary')
            .show();
}

我做错了什么以及如何让它发挥作用？

Answer 1

正如许多人已经为您提供了解决方案一样，我不会腾出时间提供相同的解决方案，我仍然确信执行不会按预期发生，因为您有使用 Index 分配值的回调肯定会破裂。原因是当 ajax 成功并且执行回调时，索引将增加以指向不同的数字。现在您的回调将采用这些值，这是错误的。

因此，处理此问题的解决方案就是将传递到 ajax 回调的值传回回调

更改代码如下。

for (i = 0; i < boxval.length; i++) {
    a(boxval[i], function (returnedValue) {
        b(returnedValue, function (returnedValue) {
            c(returnedValue);
        });
    });
}

并将您的 callback() 更改为 callback(val) ， val 是传入 ajax 函数的内容。

因此结论是按照上面的建议更改 for 循环 和 callback 并将 callback(val) 移至 ajax成功。

编辑:由于您希望函数同步执行，因此可以使用递归函数。也就是说，除非覆盖了所有索引，否则从第一个索引开始执行该函数。这是一个示例fiddle (观看控制台输出)

var boxval = [1, 2, 3]

function RecursiveExecution(index) {
  var value = boxval[index];  
  a(value, function(returnedValue) {    
    b(returnedValue, function(returnedValue) {      
      c(returnedValue);

      if (index < boxval.length -1) { // if there are more items do this process again
        RecurrsiveExecution(++index);  
      }
    });
  });
}

RecursiveExecution(0); // initiate the recursive function.