Question

我正在尝试让我的页面等待，直到所有数据加载完毕并放入正确的数组中为止。我使用3个独立的ajax调用加载数据，但是由于加载有时会花费一些时间，因此页面在有空数组的情况下会继续，并且我需要此数据才能在页面上执行任何操作。

我一直在研究jQuery.when函数，但似乎无法正常工作。

这是ajax调用中的1个：

function getWerktijden(){
    var AllArrays = [];
    var dagen = [];
    var start = [];
    var end = [];
    $.ajax({
        type: "GET",
        url: '@Url.Action("getWerktijden")',
        data: {
            id: @Model.ID,
            dag: d,
            maandNr: m,
            jaarNr: y,
            getJson: true,
        },
        success: function (result) {
            //console.log(result);
            for(var v = 0; v < result.length; v++){
                var resultItem = result[v];

                var ingangsDatum = resultItem.activatieDatum;
                var uitgangsDatum = resultItem.stopDatum;
                if(ingangsDatum != ""){
                    ingangsDatum = new Date(changeDateTimeFormat(ingangsDatum));
                    ingangsDatum = ingangsDatum.toString('yyyy-MM-dd HH:mm:ss');
                };
                if(uitgangsDatum != ""){
                    uitgangsDatum = new Date(changeDateTimeFormat(uitgangsDatum));
                    uitgangsDatum = uitgangsDatum.toString('yyyy-MM-dd HH:mm:ss');
                };

                dagen.push({
                    werktijdenID: resultItem.id,
                    ingang: ingangsDatum,
                    uitgang: uitgangsDatum,
                    maandag: resultItem.maandag,
                    dinsdag: resultItem.dinsdag,
                    woensdag: resultItem.woensdag,
                    donderdag: resultItem.donderdag,
                    vrijdag: resultItem.vrijdag,
                    zaterdag: resultItem.zaterdag,
                    zondag: resultItem.zondag
                });

                start.push({
                    werktijdenID: resultItem.id,
                    ma_van: resultItem.ma_van,
                    di_van: resultItem.di_van,
                    wo_van: resultItem.wo_van,
                    do_van: resultItem.do_van,
                    vr_van: resultItem.vr_van,
                    za_van: resultItem.za_van,
                    zo_van: resultItem.zo_van,
                })

                end.push({
                    werktijdenID: resultItem.id,
                    ma_tot: resultItem.ma_tot,
                    di_tot: resultItem.di_tot,
                    wo_tot: resultItem.wo_tot,
                    do_tot: resultItem.do_tot,
                    vr_tot: resultItem.vr_tot,
                    za_tot: resultItem.za_tot,
                    zo_tot: resultItem.zo_tot,
                })
            }
        }
    });
    AllArrays.push(dagen, start, end);
    return AllArrays;
};

然后我在变量上调用该函数以将这些结果返回到该变量中，并检查是否使用jQuery.when函数完成了该操作，但是无论该函数是否完成，页面都将继续。

var allArrays = getWerktijden();
var event = getMeldingen(); //I put this here to show I have more ajax calls
var ziektedatums = getZiektedatums(); //I put this here to show I have more ajax calls

$.when.apply($, allArrays, event, ziektedatums).then(function(){
    dagenPerWeek = allArrays[0];
    startPerDag = allArrays[1];
    endPerDag = allArrays[2];
}).done(function(){
    console.log(dagenPerWeek, startPerDag, endPerDag, event, ziektedatums);
});

有人可以向我解释我在做什么错吗？

谢谢！

Answer 1

从每个函数中返回$.ajax承诺而不是数组

该数组将在ajax完成之前立即返回，因为它是异步的。另外，数组不是一个保证，因此$.when不会等待它填充

在现代浏览器中使用Promise.all()和$.when()也更容易

所以它看起来像：

function getWerktijden() {
  var AllArrays = [];
  var dagen = [];
  var start = [];
  var end = [];

  // return the promise
  return $.ajax({ /* config options*/ })
    .then(function(result) {
      // do the processing into various arrays


      // return to be used in next part of promise chain
      return AllArrays;
    });
}



Promise.all([getWerktijden(), getMeldingen(), getZiektedatums()])
       .then(function(results){
          // results will be array of whatever is returned from  `then()`
          // in each function and is in same order as they are called

          var getWerktijden_Arrays = results[0],
              dagenPerWeek = getWerktijden_Arrays[0]

              console.log(dagemPerWeek);
       })

等待数组被ajax结果填充

1 个答案: