javascript - 在具有固定链调用结束的循环中链接 jquery .when().then()

Question

我能找到的最接近的答案是这个 https://stackoverflow.com/a/17216555/2834734

The most common use for .then is chaining ajax requests:

$.ajax({...}).then(function(){
return $.ajax({...}); }).then(function(){
return $.ajax({...}); }).then(function(){
return $.ajax({...}); }).then(function(){
return $.ajax({...}); });

this can easily be done in a loop

然而，这是我在循环过程中遇到的困难，而且我有一些不寻常的情况。

简单的解释是，我有一个需要循环的请求数组，有些会调用 ajax 加载，有些则不会。我需要它们连续运行，但最后还要运行特定的函数调用。

这是我的情况的一个简单(我希望)示例:

      // Here is my flow of logic
       var thingsToDo = new tasks(); // Initiate the constructor, explained below

        // Loop through the requests array and process them consecutively
       for (var i in thingsToDo.requests) {
         $.when(thingsToDo.jqxhr).then(function() {
           thingsToDo.requests[i].fn();
         })
       }
        // Run my final function at the end of the chain.
       $.when(thingsToDo.jqxhr).then(function() {
         runOnceAllComplete();
       });

这是上面所基于的构造函数类。

        // Constructor
       function tasks() {
         _tasks_ = this; // automatic global var 
         this.jqxhr = undefined; // Var to monitor ajax calls
         this.requests = [ // list of tasks to run.
           {
             url: 'file1.php',
             fn: function() {
               _tasks_.load(this.url);
               console.log('file1 loaded');
             }
           }, {
             url: 'file2.php',
             fn: function() {
               _tasks_.load(this.url);
               console.log('file2 loaded');
             }
           }, {
             noUrl: true, // Note there is no file to load here
             fn: function() {
               console.log('no file here to load, but process something else');
               $('body').css("background-color", "blue");
             }
           }, {
             url: 'file3.php',
             fn: function() {
               _tasks_.load(this.url);
               console.log('file1 loaded');
             }
           },
         ];
         this.load = function(file) { // This runs the ajax call and resets this.jqxhr             
           this.jqxhr = $.get(file);
         }
       }

       function runOnceAllComplete() {
         alert('hooray!, we finished');
       }

我遇到的棘手部分是请求是动态创建的，因此可能有 1-n 个请求需要执行，这就是我选择循环的原因，并且它们必须按该顺序执行。

如前所述，某些请求将调用 ajax 调用，而其他请求可能不会，这似乎并没有破坏 $.when().then() ，但问题是循环在 promise 解决之前继续，并且我的最终函数发生在最终请求之前。第一次使用 Promise 时，我仍在尝试理解它们。

Answer 1

尝试在 fn 、 this.load 处包含 return 语句；在 fn 处添加链接到 $("body") 的 .promise() 以返回 jQuery Promise 对象；在 $.when()

处使用 Function.prototype.apply() 、 $.map()

fn: function() {
  // added `return`
  return _tasks_.load(this.url);               
}

<小时/>

this.load = function(file) { 
  this.jqxhr = $.get(file);
  // added `return`
  return this.jqxhr
}

<小时/>

fn: function() {
  console.log('no file here to load, but process something else');
  // added `return` , `.promise()`
  return $('body').css("background-color", "blue").promise();
}

<小时/>

$.when.apply($, $.map(thingsToDo.requests, function(task) {
  return task.fn()
})).then(runOnceAllComplete)

另请参阅Pass in an array of Deferreds to $.when() , What does $.when.apply($, someArray) do?

<小时/>

however I'm encountering a problem, using the .map() it doesn't wait for each request to complete before processing the next one. I need each one to complete before moving to the next.

尝试使用 .queue() ，它将按顺序调用队列中的函数，并且仅当在当前函数调用 next 时

$(thingsToDo).queue("tasks", $.map(thingsToDo.requests, function(task) {
  return function(next) {
    // call next function in `"tasks"` queue
    // when current function completes using `.then(next)`
    return task.fn().then(next)
  }
})).dequeue("tasks").promise("tasks").then(runOnceAllComplete)

参见.queue() , .promise() , Execute function queue in javascript