JavaScript Promise then()在resolve()之前运行

Question

我正在努力学习JS Promises。我写了下面的一段代码，只是想看看它是否有效，displayPersons()函数在2秒超时结束之前运行。

该代码基本上有一个名为Persons的对象数组。addPerson()将另一个对象添加到Persons数组中。我希望在添加新人员后显示这些人员。但是输出HTML在没有2秒显示的情况下立即显示，并且只显示第一个人。

let persons = [
{
name:'Muhammad Rohan Hussain',
age: 21,
job: 'Programmer'
}
]
function addPerson(aname, aage, ajob) {
return new Promise((resolve, reject) => {
setTimeout(() => {
persons.push({ name: aname, age: aage, job: ajob });
resolve();
}, 2000);
});
}
function personStringify(n) {
return persons[n].name + ' ' + persons[n].age + ' ' + persons[n].job;
}
function displayPersons() {
let text = '<ul>';
let i = 0;
for (i = 0; i < persons.length; i++) {
text += '<li>' + personStringify(i) + '</li>';
}
text += '</ul>';
document.body.innerHTML = text;
}
addPerson('Alishba Azam',21,'Audiologist').then(displayPersons())

Answer 1

您应该将函数传递给.then，而不是立即调用它。

addPerson('Alishba Azam',21,'Audiologist').then(displayPersons)

let persons = [
{
name:'Muhammad Rohan Hussain',
age: 21,
job: 'Programmer'
}
]
function addPerson(aname, aage, ajob) {
return new Promise((resolve, reject) => {
setTimeout(() => {
persons.push({ name: aname, age: aage, job: ajob });
resolve();
}, 2000);
});
}
function personStringify(n) {
return persons[n].name + ' ' + persons[n].age + ' ' + persons[n].job;
}
function displayPersons() {
let text = '<ul>';
let i = 0;
for (i = 0; i < persons.length; i++) {
text += '<li>' + personStringify(i) + '</li>';
}
text += '</ul>';
document.body.innerHTML = text;
}
addPerson('Alishba Azam',21,'Audiologist').then(displayPersons);