tick(): ожидание обновлений DOM
Ожидайте tick(), чтобы убедиться, что DOM отражает последнее состояние, прежде чем считывать значения разметки
«tick(): ожидание обновлений DOM» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что делает tick
tick() возвращает обещание, которое выполняется после применения ожидающих изменений состояния к DOM.
Импорт
Импортируйте из svelte.
<script>
import { tick } from "svelte";
</script>Зачем ждать
Если изменить состояние и сразу считать данные из DOM, можно получить старые значения. tick() гарантирует получение актуальных измерений.
Пример
Дождитесь tick перед прокруткой к недавно добавленному элементу.
items = [...items, newItem];
await tick();
lastEl.scrollIntoView();В обработчиках событий
Сделайте обработчик асинхронным, чтобы можно было использовать await tick.
async function add() {
items = [...items, x];
await tick();
measure();
}В реактивных выражениях
Вы можете использовать await tick в реактивных выражениях, обёрнутых в асинхронные функции.
В отличие от afterUpdate
afterUpdate срабатывает после каждого обновления, а tick() ожидает только текущее ожидающее обновление.
Поведение при SSR
На сервере tick() выполняется немедленно, поэтому его можно использовать без ветвления.
Распространённая ошибка
Если забыть await, tick вернёт обещание, но ожидания не произойдёт. Всегда используйте await.
Объединение с bind:this
В большинстве случаев tick используется для чтения данных из привязанного элемента или прокрутки к нему.
Небольшая вспомогательная функция
Для повторяющихся шаблонов объедините tick и прокрутку во вспомогательной функции.
async function scrollIntoView(el) { await tick(); el.scrollIntoView(); }Быстрая проверка
Что возвращает tick()?
Итоги
tick() позволяет дождаться следующего обновления DOM, чтобы последующие чтения получили актуальное состояние. Используйте его вместе со ссылками.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «tick(): ожидание обновлений DOM» бесплатный?
Да — полный текст урока «tick(): ожидание обновлений DOM» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «tick(): ожидание обновлений DOM»?
Ожидайте tick(), чтобы убедиться, что DOM отражает последнее состояние, прежде чем считывать значения разметки Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «tick(): ожидание обновлений DOM»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- onMount: выполнение после отображения
- onDestroy: очистка
- beforeUpdate и afterUpdate
- tick(): ожидание обновлений DOM