Синхронные события с sync()

Хотя это и не самый распространенный случай использования, иногда вам может понадобиться синхронная обработка событий.

Поскольку по умолчанию Qwik обрабатывает данные асинхронно, ваш код должен быть явно настроен на синхронные вызовы.

Существует два способа синхронной обработки событий:

1. предпочтительный способ: используйте sync$() для синхронной загрузки кода. Быстрая, возобновляемая, но со значительными ограничениями на размер обработчика событий.
2. немедленная регистрация: используйте useVisibleTask$() для синхронной загрузки кода. Ограничений нет, но требуется быстрое выполнение кода, что противоречит возобновляемости.

Этот пример показывает, как использовать синхронные блоки кода с помощью sync$().

  <a href="/"
    onClick$={sync$((event, target) => {
      if (event.ctrlKey) {
        event.preventDefault();
      }
    })}>
    ссылка
  </a>

Ограничения sync$() (BETA)

Функция sync$() - это возобновляемый способ синхронной обработки событий. Однако он имеет ряд существенных ограничений. Функция sync$() не может закрываться поверх чего-либо. Следствием этого является то, что вы не можете:

• доступ к любому состоянию: Рекомендуемый способ передать состояние в функцию - разместить его в атрибутах элемента.
• доступ к любым функциям, не относящимся к браузеру: Импорт или закрытие переменных или функций запрещены.
• функция должна быть небольшой, так как она будет вставлена в результирующий HTML.

По этой причине мы рекомендуем разбить обработчики событий на две части:

1. sync$(): Часть, которая должна быть синхронной. Эта часть должна быть небольшой и не закрывать ничего.
2. $(): Часть, которая может быть асинхронной. Эта часть может быть большой и закрывать все, включая состояние.

  <a href="/"
    onClick$={[
      sync$((event, target) => {
        // Эта часть является синхронной и не может закрываться поверх чего-либо.
        if (event.ctrlKey) {
          event.preventDefault();
        }
      }),
      $(() => {
        // Эта часть может быть асинхронной и закрываться поверх чего угодно.
        console.log('clicked');
      })
    ]}>
    ссылка
  </a>

Ваша задача: Преобразуйте onClick$ из асинхронного события в синхронное, используя жизненный цикл useVisibleTask$ и обычная регистрация событий.

Next: Синхронные события с useVisibleTask$()