Question

我需要逐个调用三个函数。为此，我使用jquery延迟“then”链接调用。

以下是代码：

function fillQuantity(x){
    console.log('Q');
    var deferred = jQuery.Deferred();

    var intervalId = setInterval(function(){
        clearInterval(intervalId);
        console.log("Quantity: ", x);    
        deferred.resolve();
    }, 2000);

    return deferred.promise();
};

function fillPrice(x){
    console.log('P');
    var deferred = jQuery.Deferred();

    var intervalId = setInterval(function(){
        clearInterval(intervalId);
        console.log("Price: ", x);    
        deferred.resolve();
    }, 2000);

    return deferred.promise();
};

function fillSection(x){
    console.log('S');
    var deferred = jQuery.Deferred();

    var intervalId = setInterval(function(){
        clearInterval(intervalId);
        console.log("Section: ", x);    
        deferred.resolve();
    }, 2000);

    return deferred.promise();
};

var promise = jQuery.when().promise();

promise = promise.then(fillQuantity).then(fillPrice).then(fillSection);

promise.done(function(){
    console.log('done');
});

在这种情况下，我应该有以下输出：

Q

数量：未定义

P

价格：未定义

取值

部分：未定义

完成

但实际上我收到了：

Q

P

取值

完成

数量：未定义

价格：未定义

部分：未定义

我看到jQuery调用了所有三个函数并忽略了promise解析。我做错了什么？或者我不了解jquery承诺？

感谢。

Answer 1

我建议考虑使用符合es6的承诺实现。

为确保正确性，es6承诺规范已经进行了大量的工作，这有助于防止这些类型的缺陷。不幸的是，jQuery目前可能会引起很大的麻烦。（比如你提到的问题）

此外，一些（很快其他）常绿浏览器将带有这样的实现。目前使用polyfil可能是合适的。我建议看看https://github.com/jakearchibald/ES6-Promises

无论如何，我已经重构了你的例子来处理任何符合es6的实现，现在它按预期工作。

function fillQuantity(x){
  console.log('Q');

  return new Promise(function(resolve){
    var intervalId = setInterval(function(){
      clearInterval(intervalId);
      console.log("Quantity: ", x);
      resolve();
    }, 2000);
  });
};

function fillPrice(x){
  console.log('P');

  return new Promise(function(resolve) {
    var intervalId = setInterval(function(){
        clearInterval(intervalId);
        console.log("Price: ", x);
        resolve();
    }, 2000);
  });
};

function fillSection(x){
  console.log('S');

  return new Promise(function(resolve){

    var intervalId = setInterval(function(){
        clearInterval(intervalId);
        console.log("Section: ", x);
        resolve();
    }, 2000);
  });
};

var promise = Promise.resolve();

promise.
  then(fillQuantity).
  then(fillPrice).
  then(fillSection).
  then(function(){
    console.log('done');
  });

输出：

Quantity: undefined
P
Price:  undefined
S
Section:  undefined
done

Answer 2

似乎是jQuery版本的问题。

1.6.1 - 工作不正确。 2.0.3 - 按预期工作

承诺是新的时候发布了jQuery 1.6.1。这是错误的。

看起来它在1.8.3左右被修复/改变了。

1.7.1也没有通过测试;

jQuery“.then（）”不是后续的，并且没有像预期的那样工作

2 个答案: