tick()：DOM更新を待機する
tick()をawaitして、レイアウト値を読み取る前にDOMが最新の状態を反映するようにします。
「tick()：DOM更新を待機する」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
tickとは
tick()は、保留中の状態変更がDOMに適用された後に解決するPromiseを返します。
インポートする
svelteからインポートします。
<script>
import { tick } from "svelte";
</script>待機する理由
状態を変更してすぐにDOMを読み取ると、古い値が表示されることがあります。tick()を使うと、最新の状態を計測できます。
例
新しく挿入された要素までスクロールする前に、tickを待機します。
items = [...items, newItem];
await tick();
lastEl.scrollIntoView();イベントハンドラー内で使用する
tickをawaitできるように、ハンドラーをasyncにしてください。
async function add() {
items = [...items, x];
await tick();
measure();
}リアクティブ文内で使用する
async関数でラップしたリアクティブ文から、tickをawaitできます。
afterUpdateとの比較
afterUpdateは更新のたびに実行されますが、tick()は現在保留中の更新だけを待機します。
SSRでの動作
サーバー上ではtick()はすぐに解決されるため、条件分岐なしで使用できます。
よくある落とし穴
awaitを忘れると、tickはPromiseを返すだけで待機しません。必ずawaitしてください。
bind:thisと組み合わせる
tickの用途の多くは、bindされた要素を読み取るか、その要素までスクロールすることです。
小さなヘルパー
繰り返し使うパターンでは、tickとスクロール処理をヘルパーにまとめてください。
async function scrollIntoView(el) { await tick(); el.scrollIntoView(); }クイックチェック
tick()は何を返しますか。
まとめ
tick()を使うと、次のDOM更新をawaitできるため、その後の読み取りで最新の状態を取得できます。参照と組み合わせて使用してください。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「tick()：DOM更新を待機する」レッスンは無料ですか？
はい。「tick()：DOM更新を待機する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「tick()：DOM更新を待機する」で何を学びますか？
tick()をawaitして、レイアウト値を読み取る前にDOMが最新の状態を反映するようにします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「tick()：DOM更新を待機する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- onMount：レンダリング後の処理
- onDestroy：クリーンアップ
- beforeUpdateとafterUpdate
- tick()：DOM更新を待機する