使用 sync() 的同步事件

虽然不常见,但您可能偶尔需要同步处理事件。

由于 Qwik 默认情况下异步处理,因此您的代码必须明确配置为同步调用。

有两种方法可以同步处理事件

  1. 首选方法:使用 sync$() 同步加载代码。快速,可恢复,但对事件处理程序大小有 **重大限制**。
  2. 急切注册:使用 useVisibleTask$() 同步加载代码。没有限制,但需要急切代码执行,这与可恢复性背道而驰。

此示例展示了如何使用 sync$() 使用同步代码块。

  <a href="/" 
    onClick$={sync$((event, target) => {
      if (event.ctrlKey) {
        event.preventDefault();
      }
    })}>
    link
  </a>

sync$() 限制 (BETA)

sync$() 函数是同步处理事件的可恢复方法。但是,它有一些重大限制。sync$() **不能闭包任何内容**。这意味着您不能

  • 访问任何状态:将状态放入函数中的推荐方法是将其放在元素属性上。
  • 访问任何非浏览器函数:不允许导入或闭包任何变量或函数。
  • 该函数应该很小,因为它将被内联到生成的 HTML 中。

因此,我们建议将事件处理程序分成两部分

  1. sync$():必须同步的部分。这部分应该很小,并且不闭包任何内容。
  2. $():可以异步的部分。这部分可以很大,并且可以闭包任何内容,包括状态。
  <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$ 从异步事件转换为同步事件。

编辑教程