⏳ التكرار السحري – تعلم setInterval للأطفال 🎉 مرحباً من جديد يا أبطال! في المقالة السابقة تعرفنا على setTimeout التي تجعل الكمبيوتر ينتظر قليلاً ثم يقوم بتنف…

المؤلف آن بالعربي
تاريخ النشر
آخر تحديث

⏳ التكرار السحري – تعلم setInterval للأطفال

🎉 مرحباً من جديد يا أبطال!

في المقالة السابقة تعرفنا على setTimeout التي تجعل الكمبيوتر ينتظر قليلاً ثم يقوم بتنفيذ أمر واحد فقط. اليوم سنتعلم أداة جديدة تشبهها لكنها أقوى: setInterval. هذه الأداة تسمح لنا أن نكرر شيئاً بشكل مستمر كل فترة زمنية. إنها مثل ساعة تدق كل ثانية! 🕒

🔎 ما هي setInterval؟

setInterval هي دالة (function) في JavaScript تجعل الكمبيوتر يشغل كود معين مرات متكررة كل فترة زمنية نحددها (بالملّي ثانية).

الصيغة الأساسية:


setInterval(function() {
    // الكود الذي نريد تكراره
}, الوقت_بالملّي_ثانية);

⚡ الفرق الأساسي بين setTimeout وsetInterval: - setTimeout يعمل مرة واحدة فقط. - setInterval يكرر الكود مراراً كل فترة زمنية.

📝 مثال بسيط

لنكتب رسالة في الشاشة كل ثانيتين:


setInterval(function() {
    console.log("مرحباً كل ثانيتين! 🎉");
}, 2000);

النتيجة: في الـ console ستظهر الرسالة "مرحباً كل ثانيتين!" بشكل متكرر بدون توقف.

🔢 عداد بسيط

لنصنع عداداً يزيد كل ثانية:


<p id="counter">0</p>

<script>
let count = 0;

setInterval(function() {
    count++;
    document.getElementById("counter").textContent = count;
}, 1000);
</script>

كل ثانية سيزيد الرقم في الشاشة بمقدار واحد ⏰.

🎨 تغيير الألوان بشكل متكرر

لنغير لون الخلفية كل ثانية بشكل عشوائي:


function getRandomColor() {
    let colors = ["pink", "lightgreen", "lightyellow", "lightblue", "lavender"];
    let randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
}

setInterval(function() {
    document.body.style.backgroundColor = getRandomColor();
}, 1000);

كل ثانية سيتغير لون الخلفية 🎨.

🎮 لعبة صغيرة – ساعة حقيقية

يمكننا صنع ساعة رقمية تتحدث كل ثانية:


<p id="clock"></p>

<script>
setInterval(function() {
    let now = new Date();
    let time = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
    document.getElementById("clock").textContent = time;
}, 1000);
</script>

بهذا الشكل صنعت ساعتك الخاصة ⏰!

🚀 تحريك عنصر بشكل متكرر

يمكننا جعل مربع يتحرك تلقائياً إلى اليمين كل نصف ثانية:


<div id="box" style="width:50px; height:50px; background:red; position:relative;"></div>

<script>
let pos = 0;

setInterval(function() {
    pos += 10;
    document.getElementById("box").style.left = pos + "px";
}, 500);
</script>

كل نصف ثانية سيتحرك المربع 10 بكسل. 🟥➡️

🛑 إيقاف setInterval – clearInterval

أحياناً نريد إيقاف التكرار. لذلك نستخدم clearInterval. مثال: عداد يتوقف بعد الوصول إلى 10. 


<p id="countNum">0</p>

<script>
let num = 0;
let myInterval = setInterval(function() {
    num++;
    document.getElementById("countNum").textContent = num;
    if (num === 10) {
        clearInterval(myInterval);
    }
}, 1000);
</script>

العد سيتوقف عند الرقم 10 🛑.

🎈 لعبة البالونات الطائرة

لنصنع لعبة تظهر فيها بالونات جديدة كل ثانية، وعليك النقر عليها لتختفي:


<div id="balloonGame" style="height:300px; border:1px solid black; position:relative;"></div>

<script>
setInterval(function() {
    let balloon = document.createElement("span");
    balloon.textContent = "🎈";
    balloon.style.position = "absolute";
    balloon.style.left = Math.random() * 250 + "px";
    balloon.style.top = Math.random() * 250 + "px";
    balloon.style.fontSize = "30px";

    balloon.addEventListener("click", function() {
        balloon.remove();
    });

    document.getElementById("balloonGame").appendChild(balloon);
}, 1000);
</script>

كل ثانية يظهر بالون جديد في مكان عشوائي. حاول أن تنقر عليها بسرعة قبل أن تملأ الشاشة! 😃

🎲 لعبة النرد (Dice)

لنصنع لعبة يلعب فيها الكمبيوتر النرد كل 3 ثوانٍ:


<p id="diceResult"></p>

<script>
setInterval(function() {
    let dice = Math.floor(Math.random() * 6) + 1;
    document.getElementById("diceResult").textContent = "🎲 رقم النرد: " + dice;
}, 3000);
</script>

كل 3 ثوانٍ سترى نتيجة جديدة وكأنك تلعب النرد مع الكمبيوتر! 🎮

💡 أفكار ممتعة لتجربة setInterval

  • اصنع عد تنازلي يبدأ من 10 حتى 0 ثم يعرض "انتهى الوقت!".
  • غيّر صورة كل ثانية لتصنع عرضاً متحركاً (slideshow).
  • اجعل شخصية كرتونية تتحرك يميناً ويساراً بشكل تلقائي.
  • ادمج setInterval مع clearInterval لصنع سباق محدود بالوقت.

📝 الخلاصة

- setInterval تكرر الكود كل فترة زمنية نحددها.
- الفرق بينها وبين setTimeout: الأولى تتكرر، الثانية تعمل مرة واحدة فقط.
- يمكننا إيقافها باستخدام clearInterval.
- باستخدامها يمكننا صنع عدادات، ساعات، ألعاب، وحركات رائعة.
- هذه الأداة تجعل صفحاتك تنبض بالحياة ✨ وتفتح الباب لأفكار لا تنتهي! 🚀

تعليقات

عدد التعليقات : 0

    إضافة تعليق جديد