Javascript 在Js中具有多个依赖Ajax调用的循环

这个问题旨在解决包含依赖于前一个ajax调用的ajax调用的令人麻木的循环

---

通过这些循环的最佳和有效的方法是什么？任何术语都很好

考虑这个例子：

elements : {
  'make' : obj,
  'model': obj,
  'trim' : obj
}
values  : {
  'model': 'a4',
  'trim' : 'base'
}

methods.updateElements(elements['make'], function(){

  methods.updateElements(elements['model'], function(){
    // Set previous element's value.
    elements['model'].val(values['model']);

    methods.updateElements(elements['trim'], function(){

      elements['trim'].val(values['trim']);  
    });
  });
});

如您所见，前面的方法打破了枯燥的经验法则

其中

methods.updateElements（element，callback）

methods包含一个简单的

getJson

请求，该请求将带有值数组的json转换为select

元素上的选项列表，并在完成后调用
回调

methods.updateElements(el, callback){
     // get the value of el
     // Get an ajax request with an array of different models
     // Append each item in the array as an option in the el
     callback();
}

如上所述，
元素['model']
取决于前一个元素的值，该值在提取其他相关数据之前是单独的

现在，这个特定的代码很短，但是随着
元素
和
值
对象的长度变长，代码很快就会变得混乱

我们可以创建什么方法来防止
方法.updateElements
方法变得太长？
当您阅读有关承诺的内容时，我建议您看看jQuery自己的实现

这些将为您提供一种跟踪并发异步请求的方法，或者设置一个请求链，使它们仅在以前的一组请求或操作完成后发生

如果您想更深入地研究该主题，还应查阅有关延续的文档：
当您阅读有关承诺的内容时，我建议您看看jQuery自己的实现

这些将为您提供一种跟踪并发异步请求的方法，或者设置一个请求链，使它们仅在以前的一组请求或操作完成后发生

如果您想更深入地研究该主题，还应查阅有关延续的文档：
当您阅读有关承诺的内容时，我建议您看看jQuery自己的实现

这些将为您提供一种跟踪并发异步请求的方法，或者设置一个请求链，使它们仅在以前的一组请求或操作完成后发生

如果您想更深入地研究该主题，还应查阅有关延续的文档：
当您阅读有关承诺的内容时，我建议您看看jQuery自己的实现

这些将为您提供一种跟踪并发异步请求的方法，或者设置一个请求链，使它们仅在以前的一组请求或操作完成后发生

如果您想更深入地研究该主题，还应查阅有关延续的文档：
可能是这样的：（确保打开控制台）

var
钥匙=[
“制造”，
“模型”，
“修剪”
],
元素={
“make”：“makeobj”，
“model”：“modelobj”，
“trim”：“trimobj”
},
值={
‘型号’：‘a4’，
“修剪”：“基础”
},
方法={
updateElements:函数（el，回调）{
//得到el的值
//使用不同模型的数组获取ajax请求
//将数组中的每个项作为el中的一个选项追加
回调（）；
}
}
;
methods.updateElements（元素['make']，函数（）{
变量
func=函数（键索引）{
methods.updateElements（元素[keys[keyIndex]]，函数（）{
//元素[keys[keyIndex]].val（值[keys[keyIndex]]）；
log（“Set”+keyIndex+”：“+elements[keys[keyIndex]]+”：“+values[keys[keyIndex]]）；
keyIndex++；
if（键索引<键长度）{
func（键索引）；
}
});
};
func（1）；
});
可能是这样的：（确保打开控制台）

var
钥匙=[
“制造”，
“模型”，
“修剪”
],
元素={
“make”：“makeobj”，
“model”：“modelobj”，
“trim”：“trimobj”
},
值={
‘型号’：‘a4’，
“修剪”：“基础”
},
方法={
updateElements:函数（el，回调）{
//得到el的值
//使用不同模型的数组获取ajax请求
//将数组中的每个项作为el中的一个选项追加
回调（）；
}
}
;
methods.updateElements（元素['make']，函数（）{
变量
func=函数（键索引）{
methods.updateElements（元素[keys[keyIndex]]，函数（）{
//元素[keys[keyIndex]].val（值[keys[keyIndex]]）；
log（“Set”+keyIndex+”：“+elements[keys[keyIndex]]+”：“+values[keys[keyIndex]]）；
keyIndex++；
if（键索引<键长度）{
func（键索引）；
}
});
};
func（1）；
});
可能是这样的：（确保打开控制台）

var
钥匙=[
“制造”，
“模型”，
“修剪”
],
元素={
“make”：“makeobj”，
“model”：“modelobj”，
“trim”：“trimobj”
},
值={
‘型号’：‘a4’，
“修剪”：“基础”
},
方法={
updateElements:函数（el，回调）{
//得到el的值
//使用不同模型的数组获取ajax请求
//将数组中的每个项作为el中的一个选项追加
回调（）；
}
}
;
methods.updateElements（元素['make']，函数（）{
变量
func=函数（键索引）{
methods.updateElements（元素[keys[keyIndex]]，函数（）{
//元素[keys[keyIndex]].val（值[keys[keyIndex]]）；
log（“Set”+keyIndex+”：“+elements[keys[keyIndex]]+”：“+values[keys[keyIndex]]）；
keyIndex++；
if（键索引<键长度）{
func（keyIn
var
    keys = [
      'make',
      'model',
      'trim'
    ],

    elements = {
      'make' : 'makeobj',
      'model': 'modelobj',
      'trim' : 'trimobj'
    },

    values  = {
      'model': 'a4',
      'trim' : 'base'
    },

    methods = {
      updateElements : function(el, callback){
             // get the value of el
             // Get an ajax request with an array of different models
             // Append each item in the array as an option in the el
             callback();
        }
    }
;

methods.updateElements(elements['make'], function(){
  var
    func = function(keyIndex) {
        methods.updateElements(elements[keys[keyIndex]], function(){
            //elements[keys[keyIndex]].val(values[keys[keyIndex]]);
            console.log("Set " + keyIndex + ":" + elements[keys[keyIndex]] + " : " + values[keys[keyIndex]]);

            keyIndex++;

            if (keyIndex < keys.length) {
                func(keyIndex);
            }
        });
    };

    func(1);  
});

elements = {
  'make' : obj,
  'model': obj,
  'trim' : obj
}
values  = {
  'model': 'a4',
  'trim' : 'base'
}


function runUpdate(kind, then){
       methods.updateElements(elements[kind], function(){then.call(methods, kind);});
}

function applyVal(n){
       elements[n].val(values[n]);  
}

function applyModel(n){
      applyVal(n);
      runUpdate('trim', applyVal);
}

function applyMake(n){
  runUpdate('model', applyModel);
}


runUpdate('make', applyMake);