Question

这个问题旨在解决包含依赖于先前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']);  
    });
  });
});

正如您所看到的，此前一种方法打破了DRY的经验法则。

其中methods.updateElements(element, callback)方法包含一个简单的getJson请求，该请求将带有值数组的json转换为选择element上的选项列表，并调用callback一次完成。

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

如上所示，elements['model']取决于前一个元素的值，在获取其他相关数据之前，该值是唯一的。

现在，这个特定的代码很短，但随着elements和values对象的篇幅变长，很快就会变得混乱。

我们可以创建哪种方法来阻止methods.updateElements方法过长？

Answer 1

在阅读有关承诺时，我建议您查看jQuery自己的$.Deferred实现。

这些将为您提供一种方法来跟踪并发异步请求，或设置一系列请求，以便只有在某组先前的请求或操作完成后才会发生这些请求。

如果您想深入了解主题，还应查看有关延续的文档： http://en.wikipedia.org/wiki/Continuation

Answer 2

可能是这样的：Demo（确保打开控制台）

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

Answer 3

没有达成承诺（一个很好的解决方案，但很复杂），你可以通过简单地命名你的回调和使用调度程序避免重复代码来做得更好。这会让你退出＆＃34;回调地狱＆＃34;如果天堂是一个承诺，那就进入炼狱：

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

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

3 个答案: