JavaScript-এ index.html-এ অ্যাসিঙ্ক্রোনাস কোড কল করা (async/await)

HTML পেজ লোড হওয়ার সাথে সাথে অ্যাসিঙ্ক্রোনাস ফাংশন চালানোর জন্য body onload এট্রিবিউটে async ফাংশন কল করা হয়। এটি পেজ লোড হওয়ার পর অ্যাসিঙ্ক অপারেশন (API কল, ডেটাবেজ কোয়েরি) শুরু করতে ব্যবহৃত হয়।

HTML স্ট্রাকচার

<body onload="initApp()">
    <script>
        async function initApp() {
            await loadData();
            console.log("অ্যাপ রেডি!");
        }
        
        async function loadData() {
            // সিমুলেটেড অ্যাসিঙ্ক অপারেশন
            await new Promise(r => setTimeout(r, 1000));
            console.log("ডেটা লোড হয়েছে");
        }
    </script>
</body>

পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async Onload Demo</title>
</head>
<body onload="callFunction()">
    <h1>অ্যাসিঙ্ক লোডিং ডেমো</h1>
    <div id="status">লোড হচ্ছে...</div>

    <script>
        async function callFunction() {
            await testFunction();
            document.getElementById("status").textContent = "লোড সম্পূর্ণ!";
        }

        function testFunction() {
            return new Promise(resolve => {
                setTimeout(() => {
                    console.log("Hi... অ্যাসিঙ্ক কাজ সম্পন্ন");
                    resolve();
                }, 1500);
            });
        }
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি asyncDemo.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. কনসোল ও পেজ סט্যাটাস দেখুন।

আউটপুট

• কনসোল: Hi... অ্যাসিঙ্ক কাজ সম্পন্ন
• পেজ: ১.৫ সেকেন্ড পর "লোড সম্পূর্ণ!" দেখাবে

সেরা অনুশীলন (Modern)

<script type="module">
    // মডিউল স্কোপে অটোমেটিক defer
    async function init() {
        await loadData();
        renderUI();
    }
    init();
</script>

// অথবা DOMContentLoaded
document.addEventListener('DOMContentLoaded', async () => {
    await loadData();
    renderUI();
});

দ্রষ্টব্য

• onload = সব রিসোর্স (ইমেজ, CSS) লোড হয়ে গেলে।
• DOMContentLoaded = শুধু HTML পার্স হয়ে গেলে (দ্রুত)।
• টপ-লেভেল await শুধু মডিউল স্ক্রিপ্টে কাজ করে।