如何在Javascript中异步等待状态更改

Question

我想在waitState状态从false变为true时返回0的状态。我不明白为什么不立即返回:

https://jsfiddle.net/msLzovch/1/

o = {
state: false
}
async function waitState() {
let timerId = setInterval(checkState, 1000);

function checkState() {
if (o.state == true) {
clearInterval(timerId);
}
}

return o.state; // wrong here

}
function theEnd() {
o.state = true;
}
setTimeout(theEnd, 5000);
async function main() {
let state = await waitState();
alert(state);
}
main();

Answer 1

你可以使用承诺:

o = {
state: false
}
async function waitState() {
return new Promise(resolve => {
let timerId = setInterval(checkState, 1000);

function checkState() {
if (o.state == true) {
clearInterval(timerId);
resolve(o.state);
}
}
});
}
function theEnd() {
o.state = true;
}
setTimeout(theEnd, 5000);
async function main() {
let state = await waitState();
alert(state);
}
main();

Answer 2

你的代码没有像你期望的那样工作，因为没有什么可以阻止函数waitState()立即返回一个值。setInterval()将只返回一个id，该id将存储在timerId中，o.state是可访问的。

但是你不需要有一个循环读取变量，你可以覆盖对象的set方法:

const o = {
state: false
}
Object.defineProperty(o, 'state', {
set: (value) => {
this.state = value
// call your custom function
}
})
o.state = true // your custom function will be called