链接jQuery. time（）. so（）在循环中与固定结束的链调用

Question

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

最常见的用法是链接ajax请求：

$.ajax（{…}）。然后（function（）{return$.ajax（{…}）；}）。然后（function（）{return$.ajax（{…}）；}）。然后（function（）{return$.ajax（{…}）；}）

这可以很容易地在循环中完成

然而，这是循环程序，我有困难，加上我有一些不寻常的情况。

一个简单的解释是，我有一个需要循环的请求数组，有些将调用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中包含return语句，this.load；在fn处添加链接到$（“body”）的.promise（）以返回jQuery promise对象；使用函数.prototype.apply（）

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)

另请参见将延迟数组传递给$.when（），美元.when.apply（$，someArray）的作用是什么？

但是我遇到了一个问题，使用.map（）时，它不会等到每个请求完成后再处理下一个请求。我需要在进行下一步之前完成每一步。

尝试使用.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（），在javascript中执行函数队列