javascript - 如何将嵌套的 setTimeouts 转换为 Promise

Question

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

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

进入承诺实施？

Answer 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");
    });

Answer 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

Answer 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');
});

Answer 4

遵循承诺发展的经验法则！首先，我们需要对调用 进行setTimeout承诺，以便我们获得一个返回承诺的函数。使用RSVPPromise构造函数，它看起来像这样：

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

现在，我们可以使用而不是将回调直接传递给：thensetTimeout

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

......并在所有三个步骤都执行时收回承诺。

但是，实际功能then是您现在可以取消嵌套回调，并获得完全相同的结果。所以你的链看起来像这样：

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