Question

我刚开始使用promises进行多次ajax调用，我不知道需要创建多少个。我找到了这些帖子：

jQuery Deferred - waiting for multiple AJAX requests to finish jQuery make dynamic ajax calls and wait for them to complete

所以我试着玩承诺，在这个简单的例子中：

function doSomething1() {
  var deferred1 = $.Deferred();
  setTimeout(function() {
    deferred1.resolve();
  }, 2000);
  return deferred1.promise();
}

function doSomething2() {
  var deferred2 = $.Deferred();
  setTimeout(function () {
    deferred2.resolve();
  }, 1000);
  return deferred2.promise();
}

var promise = doSomething1();
var promise2 = doSomething2();

function multiplePromises() {
  var promises = [];
  for (var i = 0; i < 3; i++) {
      var deferred = $.Deferred();
      deferred.resolve();
      promises.push(deferred);
  }
  return $.when.apply(undefined, promises).promise();
}


multiplePromises().done(function () {
  console.log("yay");
});

我得到了＃34; yay＆＃34;马上。现在为了模拟ajax调用，我尝试使用setTimeout。像这样：

function multiplePromises2() {
  var promises = [];
  for (var i = 0; i < 3; i++) {
      setTimeout(function () {
      var deferred = $.Deferred();
      deferred.resolve();  
      promises.push(deferred);
      },2000);      
  }
  return $.when.apply(undefined, promises).promise();
}

multiplePromises2().done(function () {console.log("timeout and promises");});

我没有得到实际的两秒延迟。如果我试试这个：

function multiplePromises2() {
  var promises = [];
  for (var i = 0; i < 3; i++) {
      var deferred = $.Deferred();
      setTimeout(function () {
      deferred.resolve();  
      },2000);
      promises.push(deferred);
  }
  return $.when.apply(undefined, promises).promise();
}

我从来没有收到过multiplePromises2完成的消息。所以在我的实际ajax调用中，我无法使用延迟。我尝试这样做：

    saveNewProjects(projects) {
        var projectPromises: any[] = [];

        for (var projectName in projects) {
            var project = projects[projectName][0].Project;
            if (project && project.id == 0 && project.name !== null) {
                var deferred = $.Deferred();

                var postProject = $.ajax({
                    url: "projects",
                    contentType: "application/json",
                    type: "POST",
                    data: JSON.stringify(project),
                    crossDomain: $.support.cors,
                    xhrFields: {
                        withCredentials: $.support.cors,
                    },
                    success: function (data) {
                        deferred.resolve(data);
                    },

                });
                projectPromises.push(postProject);
            }
        }
        return $.when.apply($, projectPromises).promise();
    }

我将这个函数称为：

 this.saveNewProjects(projects).then(() => {

我是否正在考虑承诺并推迟到位？它似乎没有达到我当时或完成的回调。提前谢谢。

Answer 1

这是一个令人讨厌的小问题，但问题不在于你错误地使用了延迟 - 因为你有正确的想法：这是因为你有一个闭包问题。

我们来看这个例子：

function multiplePromises2() {
    var promises = [];
    for (var i = 0; i < 3; i++) {
        var deferred = $.Deferred();
        setTimeout(function () {
            deferred.resolve();  
        },2000);
        promises.push(deferred);
    }
    return $.when.apply(undefined, promises).promise();
}

这似乎是无辜的。但遗憾的是，实际上并没有为循环的每次迭代定义一个新变量deferred。 javascript解释器将所有变量声明移动到作用域的顶部。所以这实际上与：

相同

function multiplePromises2() {
    var promises, deferred;
    promises = [];
    for (var i = 0; i < 3; i++) {
        deferred = $.Deferred();
        setTimeout(function () {
            deferred.resolve();  
        },2000);
        promises.push(deferred);
    }
    return $.when.apply(undefined, promises).promise();
}

你能看出为什么现在可能有问题吗？ setTimeout中对变量deferred的引用实际上会更改，因为您在每次迭代时都更新deferred。因此，当2秒钟结束时，您将解决一个延迟（承诺[2]）三次。要证明这一点，您可以在setTimeout中添加以下行：console.log(promises.indexOf(deferred));。

现在我们已经确定了问题，这很容易解决。只是标准的IIFE解决方案：

function multiplePromises2() {
    var promises, deferred;
    promises = [];
    for (var i = 0; i < 3; i++) {
        deferred = $.Deferred();
        (function(deferred) {
            setTimeout(function () {
                deferred.resolve();  
            },2000);
            promises.push(deferred);
        })(deferred);
    }
    return $.when.apply(undefined, promises).promise();
}

何时解决ajax调用中的promise

1 个答案: