时间戳

首页 > 解决方案 > 等待数组填充 ajax 结果

javascript - 等待数组填充 ajax 结果

问题描述

我试图让我的页面等到所有数据都加载并放入正确的数组中。我使用 3 个单独的 ajax 调用加载数据，但由于加载有时需要太长时间，因此页面会在有空数组的同时继续，我需要这些数据才能在页面上执行任何操作。

我一直在研究该jQuery.when功能，但似乎无法使其正常工作。

这是 1 个 ajax 调用：

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

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

谢谢！

标签： javascriptjqueryasp.net-mvc

解决方案

从每个函数返回$.ajaxpromise 而不是数组

该数组将在 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);
       })

推荐阅读