Promise鏈接相同的功能

Question

我想用承諾在JS中創建一個假的討論。

的console.log等待X秒，
的console.log等待X秒...

這裏是我的代碼：

var addMessage = function (msg) { 
    return new Promise(function (resolve, reject) { 
    setTimeout(function() { 
     console.log(msg) 
     resolve() 
    }, 2500) 
    }) 
} 

var scenario = function() { 
    addMessage('Hello who are you ?') 
    .then(addMessage('Hello I am John')) 
    .then(addMessage('Nice too meet you')) 
    .then(addMessage('Me too')) 
    .then(addMessage('Good Bye')) 
    .then(addMessage('Bye')) 
} 

scenario() 

但有了這個代碼，所有的console.log（）同時由時間（2500毫秒後），我是新的承諾，我真的不掌握他們。

謝謝！

Answer 1

托馬斯已經總結得不錯在他的評論：

則（）預期的功能，但方法addMessage（）返回一個承諾。 A Promise不是一個功能。而且，在 同時創建所有的承諾，這就是爲什麼他們開火的同時

您在同一時間建造所有的新承諾所以他們會立即執行，然後定時器也將同時同時結束。爲了減輕這種影響，您可以將addMessage換成.then調用中的函數。

addMessage('Hello who are you ?') 
    .then(function() { addMessage('Hello I am John') }) 
    .then(function() { addMessage('Nice too meet you') }) 
    .then(function() { addMessage('Me too') }) 
    .then(function() { addMessage('Good Bye') }) 
    .then(function() { addMessage('Bye') }) 

或者，您也可以使用Function.prototype.bind()來避免每次都編寫一個匿名函數。

addMessage('Hello who are you ?') 
    .then(addMessage.bind(null, 'Hello I am John')) 
    .then(addMessage.bind(null, 'Nice too meet you')) 
    .then(addMessage.bind(null, 'Me too')) 
    .then(addMessage.bind(null, 'Good Bye')) 
    .then(addMessage.bind(null, 'Bye')) 

當然，如果你的環境中運行的是最新的JavaScript版本，你也可以使用arrow functions：

addMessage('Hello who are you ?') 
    .then(() => addMessage('Hello I am John')) 
    .then(() => addMessage('Nice too meet you')) 
    .then(() => addMessage('Me too')) 
    .then(() => addMessage('Good Bye')) 
    .then(() => addMessage('Bye')) 

在不久的將來，你也可以使用它消除了需要await keyword對於任何.then完全調用：

await addMessage('Hello who are you ?') 
await addMessage('Hello I am John') 
await addMessage('Nice too meet you') 
await addMessage('Me too') 
await addMessage('Good Bye') 
await addMessage('Bye')