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

$ .ajax是承诺。你可以这样做：

function a(){
        return $.ajax();
    }
    function b(){
        return $.ajax();

然后

 a().then(b).then(c)

等。它应该有用。

Answer 2

所有函数都有一个按定义异步完成的ajax调用。尝试使用一些promise机制包装ajax调用，这将允许您在完成ajax调用时调用回调函数。

Answer 3

完成你要做的事情的最好方法是使用承诺，但如果你不熟悉（并且你不是你的问题），在几分钟内学习有点困难，但我推荐它。

对于你的代码，我会试试这个：

    function a(val, callbackB, callbackC)
        {
                $.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);
                        callbackB(val,callbackC)
                    }
          });
            }

    var cbB =   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);
                    }
           });
            }

    var cbC =function c(val){
                $.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);
                }
              });
            }


 for(i = 0 ; i < boxval.length; i++){
       a(boxval[i],cbB,cbC)
      });
    }

Answer 4

由于许多人已经给你解决方案我已经没有时间给出相同的解决方案了，我仍然确定执行不会按预期发生，因为你有使用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 loop和callback，并将callback(val)移到ajax的success内。

编辑：由于您希望函数同步执行，因此您可以使用递归功能。这是从第一个索引执行函数，除非覆盖了所有索引。以下是 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.

Answer 5

你这样做：

function blah() {
    success: function(responseText) {
        // ...
    }
    callback();
}

将callback();放在success内，它会起作用

function blah() {
    success: function(responseText) {
        // ...
        callback();
    }
}

Answer 6

对于那种我建议使用Promises的东西。

但是如果你不想潜入它，我会建议你在获得成功后调用下一个功能。

function a() {
    success: function(responseText) {
        // code here..
        callback();
    }
}
function b() {
    success: function(responseText) {
        // code here..
        callback();
    }
}
function c() {
    success: function(responseText) {
        // code here..
        callback();
    }
}

Answer 7

AJAX是异步调用，意味着它仍然会正常工作，其余的javascript代码将继续独立执行。

因此，您只需将回调成功回调每个ajax调用。它的作用是在ajax返回成功时调用你的回调函数。例如：

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();
        }
    });
}

在循环中完成另一个调用函数

7 个答案: