1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
use ;
use ;
use Duration;
/// The interface to a timeout.
///
/// This is used to trigger the timeout with [`UseTimeout::action`].
///
/// See [`use_timeout`] for more information.
/// A handle to a pending timeout.
///
/// A handle to a running timeout triggered with [`UseTimeout::action`].
/// This handle allows you to cancel the timeout from triggering with [`TimeoutHandle::cancel`]
///
/// See [`use_timeout`] for more information.
/// A hook to run a callback after a period of time.
///
/// Timeouts allow you to trigger a callback that occurs after a period of time. Unlike a debounce, a timeout will not
/// reset it's timer when triggered again. Instead, calling a timeout while it is already running will start another instance
/// to run the callback after the provided period.
///
/// This hook is similar to the web [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout) API.
///
/// # Examples
///
/// Example of using a timeout:
/// ```rust
/// use dioxus::prelude::*;
/// use dioxus_sdk_time::use_timeout;
/// use std::time::Duration;
///
/// #[component]
/// fn App() -> Element {
/// // Create a timeout for two seconds.
/// // Once triggered, this timeout will print "timeout called" after two seconds.
/// let timeout = use_timeout(Duration::from_secs(2), |()| println!("timeout called"));
///
/// rsx! {
/// button {
/// onclick: move |_| {
/// // Trigger the timeout.
/// timeout.action(());
/// },
/// "Click!"
/// }
/// }
/// }
/// ```
///
/// #### Cancelling Timeouts
/// Example of cancelling a timeout. This is the equivalent of a debounce.
/// ```rust
/// use dioxus::prelude::*;
/// use dioxus_sdk_time::{use_timeout, TimeoutHandle};
/// use std::time::Duration;
///
/// #[component]
/// fn App() -> Element {
/// let mut current_timeout: Signal<Option<TimeoutHandle>> = use_signal(|| None);
/// let timeout = use_timeout(Duration::from_secs(2), move |()| {
/// current_timeout.set(None);
/// println!("timeout called");
/// });
///
/// rsx! {
/// button {
/// onclick: move |_| {
/// // Cancel any currently running timeouts.
/// if let Some(handle) = *current_timeout.read() {
/// handle.cancel();
/// }
///
/// // Trigger the timeout.
/// let handle = timeout.action(());
/// current_timeout.set(Some(handle));
/// },
/// "Click!"
/// }
/// }
/// }
/// ```
///
/// #### Async Timeouts
/// Timeouts can accept an async callback:
/// ```rust
/// use dioxus::prelude::*;
/// use dioxus_sdk_time::use_timeout;
/// use std::time::Duration;
///
/// #[component]
/// fn App() -> Element {
/// // Create a timeout for two seconds.
/// // We use an async sleep to wait an even longer duration after the timeout is called.
/// let timeout = use_timeout(Duration::from_secs(2), |()| async {
/// println!("Timeout after two total seconds.");
/// tokio::time::sleep(Duration::from_secs(2)).await;
/// println!("Timeout after four total seconds.");
/// });
///
/// rsx! {
/// button {
/// onclick: move |_| {
/// // Trigger the timeout.
/// timeout.action(());
/// },
/// "Click!"
/// }
/// }
/// }
/// ```