使用 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$ 从异步事件转换为同步事件。

下一步使用 useVisibleTask$() 的同步事件