对DOM的更新在CPU密集型WASM调用期间不可见

Question

让WASM程序在我的机器上运行大约需要12秒。为了让用户留在站点上，最好表明程序正在取得进展。我在c++ WASM代码中使用EM_ASM_(...)插入了一些调用到一个JS函数，相当于:

function updateStatus(number) {
console.log("status: ", number);
document.getElementById("status").innerHTML = "Status: " + number;
}

当控制台获得实时更新时，状态"在WASM代码完成之前，DOM元素不会更新。

我尝试在c++代码中的updateStatus()调用后添加sleep(1)，但这并没有导致更新。

Answer 1

JavaScript运行时生成WebAssembly，这解释了为什么UI没有更新。要实现你想要的，你需要在Web Worker中运行你的代码。

Answer 2

下面的C代码似乎可以工作，尽管下面有一个单独的问题:

EM_JS(void, updateStatus, (int number), {
Asyncify.handleAsync(async() => {
await Promise.resolve()
.then(function() {
console.log("status: ", number);
document.getElementById("status").innerHTML = "Status: " + number;
});
await new Promise(r => setTimeout(r, 50));
});
});
void myWASM() {
...
for(int number = 0; number < MAX; number++) {
...
updateStatus(number);
...
}
...
printf("done with myWASM()");
}

在没有Promise/setTimeout调用的情况下，更新并没有出现，但这可能是DOM更新的一般特性?

一个奇怪的是，cwrap'd到myWASM()返回到JS调用者之前完成myWASM()&;执行。似乎myWASM()调用现在是异步的?我打算就此单独发一个问题。

感谢@sbc100建议ASYNCIFY。