Sveltejs Academy · पाठ

tick(): DOM अपडेट की प्रतीक्षा

लेआउट मान पढ़ने से पहले DOM में नवीनतम स्थिति आने को सुनिश्चित करने के लिए tick() का इंतज़ार करें।

पाठ 4, कुल 4 में से13 चरण

tick(): DOM अपडेट की प्रतीक्षा, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टिक क्या है

tick() एक ऐसा प्रॉमिस लौटाता है जो लंबित स्थिति परिवर्तनों के DOM पर लागू होने के बाद पूरा होता है।

इसे आयात करें

svelte से आयात करें।

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

प्रतीक्षा क्यों करें

यदि आप स्थिति बदलकर तुरंत DOM पढ़ते हैं, तो आपको पुराने मान दिखाई दे सकते हैं। tick() नए माप सुनिश्चित करता है।

उदाहरण

नए जोड़े गए एलिमेंट तक स्क्रॉल करने से पहले टिक का इंतज़ार करें।

items = [...items, newItem];
await tick();
lastEl.scrollIntoView();

इवेंट हैंडलर के अंदर

हैंडलर को असिंक्रोनस बनाएँ, ताकि आप टिक का इंतज़ार कर सकें।

async function add() {
  items = [...items, x];
  await tick();
  measure();
}

रिएक्टिव स्टेटमेंट के अंदर

असिंक्रोनस फ़ंक्शन में रखे गए रिएक्टिव स्टेटमेंट से आप टिक का इंतज़ार कर सकते हैं।

afterUpdate बनाम

afterUpdate हर अपडेट के बाद सक्रिय होता है, जबकि tick() केवल वर्तमान लंबित अपडेट का इंतज़ार करता है।

SSR का व्यवहार

सर्वर पर tick() तुरंत पूरा हो जाता है, इसलिए आप इसका उपयोग बिना किसी अलग शाखा के कर सकते हैं।

सामान्य गलती

await भूलने पर टिक प्रॉमिस लौटाता है, लेकिन आप उसका इंतज़ार नहीं करते। हमेशा इसका इंतज़ार करें।

bind:this के साथ जोड़ें

टिक के अधिकांश उपयोगों में किसी बाउंड एलिमेंट से पढ़ना या उस तक स्क्रॉल करना शामिल होता है।

छोटी सहायक विधि

बार-बार आने वाले तरीकों के लिए टिक और स्क्रॉल को एक सहायक विधि में रखें।

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

त्वरित जाँच

tick() क्या लौटाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

tick() आपको अगले DOM अपडेट का इंतज़ार करने देता है, ताकि उसके बाद पढ़े गए मान नवीनतम स्थिति दिखाएँ। इसे रेफ़रेंस के साथ जोड़ें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “tick(): DOM अपडेट की प्रतीक्षा” पाठ निःशुल्क है?

हाँ—“tick(): DOM अपडेट की प्रतीक्षा” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“tick(): DOM अपडेट की प्रतीक्षा” में मैं क्या सीखूँगा?

लेआउट मान पढ़ने से पहले DOM में नवीनतम स्थिति आने को सुनिश्चित करने के लिए tick() का इंतज़ार करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“tick(): DOM अपडेट की प्रतीक्षा” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ