使用 sync() 的同步事件
虽然不常见,但您可能偶尔需要同步处理事件。
由于 Qwik 默认情况下异步处理,因此您的代码必须明确配置为同步调用。
有两种方法可以同步处理事件
- 首选方法:使用
sync$()
同步加载代码。快速,可恢复,但对事件处理程序大小有 **重大限制**。 - 急切注册:使用
useVisibleTask$()
同步加载代码。没有限制,但需要急切代码执行,这与可恢复性背道而驰。
此示例展示了如何使用 sync$()
使用同步代码块。
<a href="/"
onClick$={sync$((event, target) => {
if (event.ctrlKey) {
event.preventDefault();
}
})}>
link
</a>
sync$()
限制 (BETA)
sync$()
函数是同步处理事件的可恢复方法。但是,它有一些重大限制。sync$()
**不能闭包任何内容**。这意味着您不能
- 访问任何状态:将状态放入函数中的推荐方法是将其放在元素属性上。
- 访问任何非浏览器函数:不允许导入或闭包任何变量或函数。
- 该函数应该很小,因为它将被内联到生成的 HTML 中。
因此,我们建议将事件处理程序分成两部分
- sync$():必须同步的部分。这部分应该很小,并且不闭包任何内容。
- $():可以异步的部分。这部分可以很大,并且可以闭包任何内容,包括状态。
<a href="/"
onClick$={[
sync$((event, target) => {
// This part is synchronous and can't close over anything.
if (event.ctrlKey) {
event.preventDefault();
}
}),
$(() => {
// This part can be asynchronous and can close over anything.
console.log('clicked');
})
]}>
link
</a>
您的任务:使用 useVisibleTask$
生命周期和 普通事件注册 将 onClick$
从异步事件转换为同步事件。