0Pricing
Sveltejs Academy · درس

tick(): انتظار تحديثات DOM

استخدم await 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 التالي، بحيث ترى القراءات اللاحقة أحدث حالة. ادمجها مع المراجع.

الأسئلة الشائعة

هل درس «tick(): انتظار تحديثات DOM» مجاني؟

نعم — نص درس «tick(): انتظار تحديثات DOM» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

ماذا ستتعلم في «tick(): انتظار تحديثات DOM»؟

استخدم await tick() لضمان عكس DOM لأحدث حالة قبل قراءة قيم التخطيط تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟

لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «tick(): انتظار تحديثات DOM»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟

نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. onMount: التشغيل بعد التصيير
  2. onDestroy: التنظيف
  3. beforeUpdate وafterUpdate
  4. tick(): انتظار تحديثات DOM
← العودة إلى Sveltejs Academy