如何将嵌套的 setTimeouts 转换为 Promise答案

【问题标题】：How to convert nested setTimeouts to promises如何将嵌套的 setTimeouts 转换为 Promise
【发布时间】：2015-06-06 09:53:31
【问题描述】：

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

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

进入承诺实现？

【问题讨论】：

标签： javascript promise rsvp.js rsvp-promise

【解决方案1】：

创建一个返回 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");
    });

【讨论】：

【解决方案2】：

链接承诺：

// 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

【讨论】：

【解决方案3】：

如果您可以使用q，那么库中提供了一个非常简单的解决方案：

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

【讨论】：

【解决方案4】：

关注rules of thumb for promise development！首先，我们需要promisify 和setTimeout 调用，以便我们得到一个函数，该函数返回一个promise。使用the RSVP Promise constructor，它看起来像这样：

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

现在，我们可以使用then 来chain 日志语句，而不是将回调直接传递给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");
});

【讨论】：