sync() を使用した同期イベント

一般的なユースケースではありませんが、イベントを同期的に処理する必要がある場合があります。

Qwik はデフォルトで非同期的に処理されるため、コードを同期呼び出し用に明示的に構成する必要があります。

イベントを同期的に処理するには、2つの方法があります。

1. 推奨方法: `sync$()` を使用してコードを同期的に読み込みます。高速で再開可能ですが、イベントハンドラのサイズに**大きな制限**があります。
2. 早期登録: `useVisibleTask$()` を使用してコードを同期的に読み込みます。制限はありませんが、再開可能性に反する早期コード実行が必要です。

この例は、`sync$()` を使用した同期コードブロックの使用方法を示しています。

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

sync$() の制限事項 (ベータ版)

sync$() 関数は、イベントを同期的に処理する再開可能な方法です。ただし、いくつかの重要な制限があります。sync$() は**何もクローズできません**。つまり、以下のことができません。

• 状態へのアクセス: 状態を関数に取り込む推奨方法は、要素属性に配置することです。
• ブラウザ以外の関数へのアクセス: インポートまたは変数や関数のクローズオーバーは許可されません。
• 関数は、結果のHTMLにインライン化されるため、小さくする必要があります。

このため、イベントハンドラを2つの部分に分割することをお勧めします。

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$() を使用した同期イベント