如何在 Yew 应用程序中包含睡眠功能？

问题描述

我正在尝试使用 Yew (Rustwasm) 构建小型应用程序。我想在 Yew 应用程序中加入睡眠功能。当我使用 std::thread::sleep 时，我遇到以下错误

我使用睡眠如下

let mut index = 0;
sleep(Duration::new(1,0));
if col < 3 {
    index = row * 4 + (col + 1);
    if self.cellule[index].value == 1 {
        sleep(Duration::new(1,0));

wasm.js:314 panicked at 'can't sleep',src/libstd/sys/wasm/thread.rs:26:9

Stack:

Error
    at imports.wbg.__wbg_new_59cb74e423758ede (http://127.0.0.1:8080/wasm.js:302:19)
    at console_error_panic_hook::hook::hd38f373f442d725c (http://127.0.0.1:8080/wasm_bg.wasm:wasm-function[117]:0x16a3e)
    at core::ops::function::Fn::call::hf1476807b3d9587d (http://127.0.0.1:8080/wasm_bg.wasm:wasm-function[429]:0x22955)
    at std::panicking::rust_panic_with_hook::hb07b303a83b6d242 (http://127.0.0.1:8080/wasm_bg.wasm:wasm-function[211]:0x1ed0d)
    at std::panicking::begin_panic::h97f15f2442acdda4 (http://127.0.0.1:8080/wasm_bg.wasm:wasm-function[321]:0x21ee0)
    at std::sys::wasm::thread::Thread::sleep::hdd97a2b229644713 (http://127.0.0.1:8080/wasm_bg.wasm:wasm-function[406]:0x22829)

解决方法

像thread::sleep这样的方法不起作用，因为在JS环境中你只有一个线程。如果您睡着了，您将完全阻止该应用程序。

如果您想使用间隔，您应该“订购”一个回调。您可以查看以下示例如何使用 TimeoutService 或 IntervalService：yew/examples/timer

以这种方式创建服务的核心思想：

let handle = TimeoutService::spawn(
    Duration::from_secs(3),self.link.callback(|_| Msg::Done),);
// Keep the task or timer will be cancelled
self.timeout_job = Some(handle);

现在您可以使用 Msg::Done 的处理程序对已过的计时器做出反应。

线程实际上是可用的，但它是一个复杂的主题，您必须使用 Web Workers API。无论如何，这对您的情况毫无用处。标准中也有一些提案，但它们尚未在浏览器中可用。