Rust编译WASM结合egui时，block_on无法阻塞异步函数的问题

在WebAssembly（WASM）的单线程事件循环模型下，async_std::task::block_on无法实现真正的阻塞逻辑——它会将异步任务提交到浏览器的事件队列后立即返回，所以你的同步代码alert("Hello, 4")会先于异步任务中的alert("Hello, 2")和alert("Hello, 3")执行，导致输出顺序不符合预期。

方案一：调整代码结构，将后续逻辑移入异步块 #

直接把需要在异步任务完成后执行的代码放到异步块内部，配合Web环境适配的wasm_bindgen_futures::spawn_local启动异步任务，这样就能保证执行顺序：

#[wasm_bindgen]
pub fn test1() {
    alert("Hello, 1");

    wasm_bindgen_futures::spawn_local(async {
        alert("Hello, 2");
        async_std::task::sleep(Duration::from_secs(5)).await;
        alert("Hello, 3");
        alert("Hello, 4"); // 移至异步任务末尾，保证顺序
    });
}

spawn_local是专门为WASM设计的异步任务启动器，比async_std的block_on更适配浏览器环境。

方案二：结合egui的响应式模型处理异步逻辑 #

如果你需要在egui的同步更新流程中配合异步任务，建议用状态驱动的方式，避免阻塞UI线程：

1. 定义共享状态跟踪异步任务的执行阶段
2. 在异步任务中更新状态并请求egui重绘
3. 在egui的update函数中根据状态执行后续逻辑

示例代码：

use egui::Context;
use std::sync::{Arc, Mutex};
use wasm_bindgen_futures::spawn_local;
use std::time::Duration;

#[derive(Default)]
struct AsyncTaskState {
    stage: u8, // 0:未启动, 1:执行中, 2:完成
}

pub fn update(app_state: &mut AsyncTaskState, ctx: &Context) {
    match app_state.stage {
        0 => {
            alert("Hello, 1");
            // 克隆状态和上下文，供异步任务使用
            let state = Arc::new(Mutex::new(app_state));
            let ctx_clone = ctx.clone();
            
            spawn_local(async move {
                alert("Hello, 2");
                async_std::task::sleep(Duration::from_secs(5)).await;
                alert("Hello, 3");
                
                // 更新状态并触发重绘，通知egui执行后续逻辑
                let mut locked_state = state.lock().unwrap();
                locked_state.stage = 2;
                ctx_clone.request_repaint();
            });
            
            app_state.stage = 1;
        }
        2 => {
            alert("Hello, 4");
            app_state.stage = 3; // 标记为已处理，避免重复执行
        }
        _ => {}
    }
}

这种方式完全符合egui的响应式设计，不会冻结浏览器UI。

关键注意事项 #

Web环境是单线程事件循环模型，不存在真正意义上的异步阻塞操作——任何强行阻塞的尝试都会导致浏览器UI冻结，甚至触发“页面无响应”提示。必须通过异步回调、状态驱动等非阻塞方式处理任务顺序。

内容的提问来源于stack exchange，提问作者justauser