Question

我有一些订购问题。我有一些代码执行以下操作：在页面加载，循环3个表并从服务器获取内容并使用所述内容填充表使表格响应

我在解决这个问题上遇到了问题。我可以通过inspect元素（调用函数）实现这一点，但这不是用户友好的。我想知道是否有一种方法可以选择正在执行的函数的排序。到目前为止我所拥有的是：

$(document).ready(function() {
    if (dateCounter == null){ //start calendar from today's date
        var current = new Date();
        dateChange(current, "", 0); //function one to get grab all contents

        //make table responsive
        var switched = false;
              var updateTables = function() {
                if (($(window).width() < 992) && !switched ){
                    console.log("window width < 992px");
                  switched = true;
                  $("table.responsive").each(function(i, element) {
                      console.log("splitting table up");
                    splitTable($(element));
                  });
                  return true;
                }
                else if (switched && ($(window).width() > 992)) {
                  switched = false;
                  $("table.responsive").each(function(i, element) {
                    unsplitTable($(element));
                  });
                }
              };
        function splitTable(original){...}
        function unsplitTable(original){...}
    }
});

理论上，在页面加载时，它应首先填充表，然后使表响应，但事实并非如此。它似乎同时渲染所有内容，因此我在表格中获得了大量丢失/隐藏的内容。我不知道我的dateChange函数中的AJAX调用是否有任何阻止我的表正确显示内容的行为。

以下是dateChange函数的代码片段：

function dateChange(dateInput, nGuests, vName){
    //format dates
    //For each table (3 tables)
    $(".title").each(function(index, element) {
    //prepare HTML for grabbing content from server
        //Grab content from server and pop into table
        $.ajax({
          url: "/grab_Content.asp?boatType="+boatName+"&date="+dateInput+"&guests="+guests+"&boatName="+vName+"",
          dataType:"html",
          success: function(data){
              table.html(data);
          }
        });
    });
}

Answer 1

是的，AJAX调用是异步的。 $.ajax返回一个可用于控制序列的承诺。首先，从dateChange返回承诺：

function dateChange(dateInput, nGuests, vName){
    return $.ajax({
      //...
    });
}

然后当你打电话时：

dateChange(current, "", 0).then(function() {

    //make table responsive
    var switched = false;
    //....
}

这将确保在使表格响应之前完成AJAX调用。

如果您有多个AJAX调用，则必须将promises存储在数组中并使用$.when：

var promises = [];
$('.whatever').each(function() {
    var promise = $.ajax({ /*...*/ });
    promises.push(promise);
});

$.when.apply($, promises).done(function() {
    console.log('all done');
    // do work....
});

请注意，我们必须使用Function.prototype.apply，因为$.when会将一系列承诺视为单一承诺。

无法让jQuery以正确的顺序执行代码

1 个答案: