Yew中使用wasm_timer重复执行回调

发布于 2025-01-10 06:01:23 字数 651 浏览 5 评论 0原文

我对 Rust 还很陌生,很难理解 future。我想在浏览器中实现一个“计时器应用程序”,为此我使用 https://yew.rs/< /a>.对于计时器,我尝试使用 https://github.com/tomaka/wasm-timer/,但没有文档,也没有示例。看起来用法应该很明显,但我不明白。

我假设我必须做类似的事情:

let i = Interval::new(core::time::Duration::from_millis(250));

这应该创建一个每 250 毫秒触发一次的间隔。但什么被解雇了呢?如何指定我的回调?我希望得到这样的结果:

i.somehow_specify_callback(|| { ... executed every 250ms ...});

我的感觉是,我不知何故走在错误的道路上,没有掌握 Rust 期货。非常感谢有关如何使 Interval 执行某些代码的工作示例。

I'm still rather new to Rust and have a hard time wrapping my head around futures. I want to implement a "timer app" in the browser and to do so I'm using https://yew.rs/. For the timer I tried to use https://github.com/tomaka/wasm-timer/, but there are not docs and no examples. Looks like the usage is supposed to be obvious, but I don't get it.

I assume that I have to do something like:

let i = Interval::new(core::time::Duration::from_millis(250));

This should create an Interval that fires every 250ms. But what is fired? How to I specify my callback? I would expect something like:

i.somehow_specify_callback(|| { ... executed every 250ms ...});

My feeling is, that I'm somehow on the wrong path and do not get grasp Rust futures. A working example on how to make an Interval execute some code would be very appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

最冷一天 2025-01-17 06:01:23

这是计时器组件的伪代码示例:

enum SecondsStateAction {
    Increment,
}

#[derive(Default)]
struct SecondsState {
    seconds: usize,
}

impl Reducible for SecondsState {
    /// Reducer Action Type
    type Action = SecondsStateAction;

    /// Reducer Function
    fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
        match action {
            SecondsStateAction::Increment => Self { seconds: self.seconds + 1 }.into(),
        }
    }
}

#[function_component(Timer)]
pub fn timer() -> Html {
    let seconds_state_handle = use_reducer(SecondsState::default);

    use_effect_with_deps(
        {
            let seconds_state_handle = seconds_state_handle.clone();

            move |_| {
                // i intervals get out of scope they get dropped and destroyed
                let interval = Interval::new(1000, move || seconds_state_handle.dispatch(SecondsStateAction::Increment));

                // So we move it into the clean up function, rust will consider this still being used and wont drop it
                // then we just drop it ourselves in the cleanup 
                move || drop(interval)
            }
        },
        (), // Only create the interval once per your component existence
    );

    html! {<h1>{*seconds_state_handle}{" seconds has passed since this component got rendered"}</h1>}
}

要了解有关我在代码中使用的挂钩的更多信息,请访问

Here is a pseudo code example for Timer component:

enum SecondsStateAction {
    Increment,
}

#[derive(Default)]
struct SecondsState {
    seconds: usize,
}

impl Reducible for SecondsState {
    /// Reducer Action Type
    type Action = SecondsStateAction;

    /// Reducer Function
    fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
        match action {
            SecondsStateAction::Increment => Self { seconds: self.seconds + 1 }.into(),
        }
    }
}

#[function_component(Timer)]
pub fn timer() -> Html {
    let seconds_state_handle = use_reducer(SecondsState::default);

    use_effect_with_deps(
        {
            let seconds_state_handle = seconds_state_handle.clone();

            move |_| {
                // i intervals get out of scope they get dropped and destroyed
                let interval = Interval::new(1000, move || seconds_state_handle.dispatch(SecondsStateAction::Increment));

                // So we move it into the clean up function, rust will consider this still being used and wont drop it
                // then we just drop it ourselves in the cleanup 
                move || drop(interval)
            }
        },
        (), // Only create the interval once per your component existence
    );

    html! {<h1>{*seconds_state_handle}{" seconds has passed since this component got rendered"}</h1>}
}

to learn more about the hooks i used in the code visit https://yew.rs/docs/concepts/function-components/hooks#pre-defined-hooks

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文