是否可以运行WebAssembly代码异步？

Question

I have written a C function that I am able to execute from Angular/TypeScript/JavaScript using WebAssembly:

testWebAssembly() {
    Module.ccall("aCFunction", null, [], []); // takes a few seconds to finish
}

This function does some heavy mathematical calculations and needs a few seconds to finish. It is fired when a user clicks a button:

<button (click)="testWebAssembly()">Launch C function</button>

Is it possible to execute the function so that it does not block the UI of the web application?

I tried setTimeOut / async / Promise , but I don't seem to be able to make it work.

Thank you!

Answer 1

WebAssembly and JavaScript share the same execution thread, ie when you execute WebAssembly from within JavaScript, your JavaScript code halts, and vice-versa. In that respect it's just like executing any other native (ie, browser-supplied) APIs from your JavaScript code.

One option you do have is to run your WebAssembly in a WebWorker, using postMessage to send messages to your wasm code that executed in a different thread. There's a great example here, that renders a fractal using WebWorkers:

https://www.reddit.com/r/rust/comments/8hdq5r/a_rust_javascript_web_workers_fractal_renderer/

In the future WebAssembly will likely have its own support for threading:

https://github.com/WebAssembly/threads

Answer 2

Asynchronous execution alone won't take it off the main thread. What you actually mean is executing it concurrently. The only way to achieve that on the Web is by using worker threads.