在有序的对象数组上处理多个AJAX或SOAP调用

Question

每个对象必须以级联方式触发多个AJAX调用（每个请求在前面的回调中调用），但这里的顺序很重要。第一个对象必须在下一个对象开始其请求之前完成所有请求，依此类推。

实际上，在我的代码中，即使我在waitForProcessFinish（）函数中使用超时，所有对象也会同时处理它们的请求。

//object properties
function LayerQuery(objectDefinition) {
    this.class = "FilteredLayer";
    this.alias = objectDefinition["alias"];
    this.sourceLayerName = objectDefinition["sourceLayerName"];
    this.sourceTableName = objectDefinition["sourceTableName"];
    this.fieldName = objectDefinition["fieldName"];
    this.operator = objectDefinition["operator"];
    this.label = objectDefinition["label"];
    this.layerStyle = objectDefinition["layerStyle"];
    this.value = objectDefinition["value"];
    this.layerVisible = objectDefinition["layerVisible"];
    this.labelVisible = objectDefinition["labelVisible"];
    this.zoomMin = objectDefinition["zoomMin"];
    this.zoomMax = objectDefinition["zoomMax"];
    this.position = objectDefinition["position"];
    this.control = objectDefinition["control"];
    this.info = objectDefinition["info"];
    this.fieldsOrder = objectDefinition["fieldsOrder"];
    this.fields = [];
    this.baseLayer = objectDefinition["baseLayer"];
}

function LayerQueries(list) {
  this.queries = list;
}

LayerQueries.prototype.loadLayers = function(){
  for (i=0; i< this.queries.length; i++){
      this.queries[i].loading = true;
      this.queries[i].addFilteredLayer();
      this.queries[i].waitForProcessFinish(); //wait for object's requests done to start next object
  }
  this.waitForProcessesFinish(); // wait for all objects' requests done
}

LayerQuery.prototype.addFilteredLayer = function(){
  var query = this;
  $.soap({
  url: 'https://carto48dev.mels.gouv.qc.ca/pushnsee_4.8/services/MapService',
  method: 'addFilteredLayer',
  appendMethodToURL: false,
  data : {
      mapInstanceKey: mapKey,
      tablePath: this.sourceTableName,
      layerName: this.sourceLayerName,
      separators: { value: ["AND"]},
      fieldNames: { value: [this.fieldName]},
      operators: { value: [this.operator]},
      values: { value: [this.value]},
      int: 0
      },
  error: function(e){
      console.log("Error addFilteredLayer: " + query.sourceLayerName);
      query.loading = false;
   },
  success: function(soapResponse){
     query.getColumnDefinitions();
  }
  });
}

LayerQuery.prototype.getColumnDefinitions = function(){
  var query = this;
  $.soap({
    url: 'https://carto48dev.mels.gouv.qc.ca/pushnsee_4.8/services/GeobaseService',
    method: 'getColumnDefinitions',
    appendMethodToURL: false,
    data : {
      tablePath: this.sourceTableName,
    },
    error: function(e){
        console.log("Error getColumnDefinitions: " + query.sourceLayerName);
        query.loading = false;
     },
    success: function(soapResponse){
      var columnsDef = JSON.parse(soapResponse.toJSON().Body.getColumnDefinitionsResponse.getColumnDefinitionsReturn.text);
      for (var i=0; i< columnsDef.length; i++){
        query.fields.push(columnsDef[i].name);
      }
      query.loading = false;
    }
  });
}

LayerQuery.prototype.waitForProcessFinish = function(){
  query = this;
  if (this.loading == false) {
    console.log("process finish")
    return;
  }else {
    setTimeout(function(){
       console.log("waiting...");
       query.waitForProcessFinish();
    },100);
  }
}

LayerQueries.prototype.waitForProcessesFinish = function(){
  layerQueries = this;
  this.processesFinished = 0;
  for (i=0; i<this.queries.length; i++){
    if (this.queries[i].loading == false) {
      this.processesFinished += 1;
    }
  }
  if (this.processesFinished == this.queries.length){
    layerQueries.setVisibilities();
  } else {
    setTimeout(function(){
       console.log("waiting again...");
       layerQueries.waitForProcessesFinish();
    },100);
  }
}

var queries = new LayerQueries([Mask_General_Query,Mask_Query,Cs_General_Query,Cs_Query,Mrc_General_Query,Mrc_Query,Mun_General_Query,Mun_Query,Org_FpAdulte_Query,Org_Sec_Query,Org_PrimSec_Query,Org_Primaire_Query]);

queries.loadLayers(); //trigger the ajax requests

Up Up！