Question

我已经搜索并找到了很多这个问题的答案，但要么解决方案对我不起作用，要么我不理解它们，所以after 30 minutes I decided to ask for help。

我有一个页面需要发生3次同步。每个都有一个专用的文件来执行服务器端同步，我连续有3个函数，他们一个接一个地级联（这里的顺序很重要）。

但是，当我访问该页面时，看起来所有三个都在同一时间开始并在同一时间结束，所以我怀疑我的async: false命令被忽略了。这是我的代码：

<script type="text/javascript">
var spin = "<i class='blue fa fa-spinner faa-spin animated'></i>";
var complete = "<i class='green fa fa-check-circle-o'></i>";
var trouble = "<i class='yellow fa fa-times-circle-o'></i>";

jQuery(document).ready(function() {
    jQuery("#teacher-status-icon").html(spin);
    jQuery("#teacher-status-text").html("Teachers - Syncing....");
    jQuery.ajax({
        url: "./sync/teachers.php",
        success: function(result) {
            if(result == "done") {
                jQuery("#teacher-status-icon").html(complete);
                jQuery("#teacher-status-text").html("teachers - Complete");
            }
            else {
                jQuery("#teacher-status-icon").html(trouble);
                jQuery("#teacher-status-text").html("teachers - Complete with Errors");
            }
        },
        async: false
    });

    jQuery("#student-status-icon").html(spin);
    jQuery("#student-status-text").html("Students - Syncing....");
    jQuery.ajax({
        url: "./sync/students.php",
        success: function(result) {
            if(result == "done") {
                jQuery("#student-status-icon").html(complete);
                jQuery("#student-status-text").html("students - Complete");
            }
            else {
                jQuery("#student-status-icon").html(trouble);
                jQuery("#student-status-text").html("students - Complete with Errors");
            }
        },
        async: false
    });

    jQuery("#classroom-status-icon").html(spin);
    jQuery("#classroom-status-text").html("Classrooms - Syncing....");
    jQuery.ajax({
        url: "./sync/classrooms.php",
        success: function(result) {
            if(result == "done") {
                jQuery("#classroom-status-icon").html(complete);
                jQuery("#classroom-status-text").html("classrooms - Complete");
            }
            else {
                jQuery("#classroom-status-icon").html(trouble);
                jQuery("#classroom-status-text").html("classrooms - Complete with Errors");
            }
        },
        async: false
    });

    jQuery("#next-button").removeClass("hidden");
});
</script>

我怀疑我误解async: false，但我不确定如何。

Answer 1

菊花链 success回调中的ajax调用。

将第二个电话放在第一个电话的success，等等......

并失去async: false ...

<script type="text/javascript">
var spin = "<i class='blue fa fa-spinner faa-spin animated'></i>";
var complete = "<i class='green fa fa-check-circle-o'></i>";
var trouble = "<i class='yellow fa fa-times-circle-o'></i>";

jQuery(document).ready(function() {
    initCall("teacher", firstCallDone);

    jQuery("#next-button").removeClass("hidden");

    function initCall(item, callBack) {
        jQuery("#" + item + "-status-icon").html(spin);
        jQuery("#" + item + "-status-text").html(item + "s - Syncing....");
        jQuery.ajax({
            url: "./sync/" + item + "s.php",
            success: callBack
        });
    }

    function getCallStatus(result, item) {
        if (result == "done") {
            jQuery("#" + item + "-status-icon").html(complete);
            jQuery("#" + item + "-status-text").html(item + "s - Complete");
            return true;
        }
        else {
            jQuery("#" + item + "-status-icon").html(trouble);
            jQuery("#" + item + "-status-text").html(item + "s - Complete with Errors");
            return false;
        }
    }

    function firstCallDone(result) {
        if (getCallStatus(result, "teacher")) {
            initCall("student", secondCallDone);
        }
    }

    function secondCallDone(result) {
        if (getCallStatus(result, "student")) {
            initCall("classroom", thirdCallDone);
        }
    }

    function thirdCallDone(result) {
        getCallStatus(result, "classroom");
    }
});
</script>

Answer 2

使用$.ajax返回的promise回调来避免回调地狱（深度嵌套和缩进代码）。以下then中的每一个都将在之前的ajax完成之后开始，因此所有都将按顺序进行。

请注意，此处的所有ajax都是异步的（async:true）

jQuery.ajax({
      url: "./sync/teachers.php",
      success: function(result) {
           // do stuff with teachers response
      }

}).then(function(){
    return jQuery.ajax({
        url: "./sync/students.php",
        success: function(result) {
           // do stuff with students response
        }
     });
}).then(function(){
    return jQuery.ajax({
        url: "./sync/classrooms.php",
        success: function(result) {
           // do stuff with classrooms response
        }
     });

}).then(function(){
   // all ajax is done now... do something here 
   jQuery("#next-button").removeClass("hidden");
});

jQuery AJAX ASync：False行为不符合预期

2 个答案: