0Pricing
Sveltejs Academy · บทเรียน

tick(): รอการอัปเดต DOM

รอ tick() เพื่อให้แน่ใจว่า DOM สะท้อนสถานะล่าสุดก่อนอ่านค่าการจัดวาง

tick(): รอการอัปเดต DOM เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

tick คืออะไร

tick() คืนค่าโพรมีสที่เสร็จสมบูรณ์หลังจากการเปลี่ยนแปลงสถานะที่รอดำเนินการถูกนำไปใช้กับ DOM แล้ว

นำเข้า

นำเข้าจาก svelte

<script>
  import { tick } from "svelte";
</script>

เหตุผลที่ต้องรอ

หากคุณเปลี่ยนสถานะแล้วอ่าน DOM ทันที คุณอาจเห็นค่าเดิม 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 เสมอ

ใช้ร่วมกับการผูกอ้างอิงองค์ประกอบ

กรณีใช้งานส่วนใหญ่ของการรอรอบการอัปเดตเกี่ยวข้องกับการอ่านค่าจากหรือเลื่อนไปยังองค์ประกอบที่ผูกไว้

ตัวช่วยขนาดเล็ก

ห่อการรอรอบการอัปเดตและการเลื่อนไว้ในฟังก์ชันตัวช่วยสำหรับรูปแบบที่ใช้ซ้ำ

async function scrollIntoView(el) { await tick(); el.scrollIntoView(); }

ฟังก์ชันรอการอัปเดตคืนค่าอะไร

ฟังก์ชันรอการอัปเดตคืนค่าอะไร

สรุป

tick() ช่วยให้คุณรอการอัปเดต DOM ครั้งถัดไป เพื่อให้การอ่านค่าครั้งต่อไปเห็นสถานะล่าสุด ใช้ร่วมกับการอ้างอิงองค์ประกอบ

คำถามที่พบบ่อย

บทเรียน “tick(): รอการอัปเดต DOM” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “tick(): รอการอัปเดต DOM” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “tick(): รอการอัปเดต DOM”

รอ tick() เพื่อให้แน่ใจว่า DOM สะท้อนสถานะล่าสุดก่อนอ่านค่าการจัดวาง คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “tick(): รอการอัปเดต DOM” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม

ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. onMount: การทำงานหลังการแสดงผล
  2. onDestroy: การล้างทรัพยากร
  3. beforeUpdate และ afterUpdate
  4. tick(): รอการอัปเดต DOM
← กลับไปที่ Sveltejs Academy