如何将嵌套的 setTimeouts 转换为 promises

Question

使用 rsvp.js 或任何其他 promises/A+ 实现如何将代码转换为...

console.log('step 1');
setTimeout(function() {
  console.log('step 2');
  setTimeout(function() {
    console.log('step 3');
  }, 100);
}, 300);

进入承诺实施？

Answer 1

把承诺串起来：

// Set up the functions which contain the promises
function step1() {
    return new RSVP.Promise(function(resolve, reject) {
        resolve();
    });
}

function step2() {
    return new RSVP.Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve();
        }, 300);
    });
}

function step3() {  
    return new RSVP.Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve();
        }, 100);
    });
}

// Now execute them:
step1()
    .then(step2)
    .then(step3)

您可以在这里阅读更多内容：http://www.toptal.com/javascript/javascript-promises

Answer 2

如果您可以使用 q，库中有一个非常简单的解决方案：

console.log('step 1');
Q.delay(300).then(function() {
    console.log('step 2');
    return Q.delay(200);
}).then(function() {
    console.log('step 3');
});

Answer 3

创建一个延迟函数，其中 returns 一个 Promise，它会在 setTimeout 中指定的时间过去后实际解析它，就像这样

function delay(time) {
    return new RSVP.Promise(function (resolve) {
        setTimeout(resolve, time);
    });
}

然后你可以像这样调用它

console.log("step 1");
delay(3000)
    .then(function () {
        console.log("step 2");
        return delay(1000);
    })
    .then(function () {
        console.log("step 3");
    });

Answer 4

跟随 rules of thumb for promise development! First of all, we need to promisify the setTimeout calls, so that we get a function which returns us a promise for it. With the RSVP Promise constructor，它看起来像这样：

function delay(time) {
    return new RSVP.Promise(function(resolve) {
        setTimeout(resolve, time);
    });
}

现在，我们可以 chain 使用 then 的日志语句，而不是将回调直接传递给 setTimeout:

console.log("step 1");
delay(3000).then(function() {
    console.log("step 2");
    return delay(1000).then(function() {
        console.log("step 3");
    });
});

…并在执行所有三个步骤时取回一个承诺。

然而，then 的实际特点是您现在可以 unnest the callbacks，并得到完全相同的结果。所以你的链看起来像这样：

console.log("step 1");
delay(3000).then(function() {
    console.log("step 2");
    return delay(1000);
}).then(function() {
    console.log("step 3");
});

如何将嵌套的 setTimeouts 转换为 promises

How to convert nested setTimeouts to promises

javascript

promise

rsvp.js

rsvp-promise