SetInterval

✅ ما هو setInterval؟

setInterval هي دالة في JavaScript تُستخدم لتنفيذ كود بشكل متكرر كل فترة زمنية معينة (بالملي ثانية)، إلى أن يتم إيقافها باستخدام clearInterval.

📌 الصيغة العامة:
let intervalID = setInterval(callback, delay, arg1, arg2, ...);
JavaScript
شرح المعاملات:
المعاملالوصف
callbackالدالة التي سيتم تنفيذها كل فترة
delayالزمن بين كل تنفيذ (بالملي ثانية)
arg1, arg2…قيم يتم تمريرها للدالة (اختياري)
intervalIDرقم يُستخدم لإلغاء التكرار لاحقًا باستخدام clearInterval

✅ مثال بسيط:

setInterval(() => {
  console.log("كل 2 ثانية");
}, 2000); // كل 2 ثانية
JavaScript

✅ مثال باستخدام دالة باسم:

function greet(name) {
  console.log("مرحباً " + name);
}

setInterval(greet, 3000, "ياسين");
JavaScript
❌ ما هو clearInterval؟

تُستخدم لإيقاف التكرار الذي بدأته باستخدام setInterval.

📌 الصيغة:
clearInterval(intervalID);
JavaScript

✅ مثال عملي:

let intervalID = setInterval(() => {
  console.log("لن تستمر طويلاً!");
}, 1000);

setTimeout(() => {
  clearInterval(intervalID);
  console.log("تم الإيقاف بعد 5 ثواني");
}, 5000);
JavaScript

🧪 مثال تفاعلي: ساعة رقمية حية

<div id="clock"></div>

<script>
function showTime() {
  const now = new Date();
  document.getElementById("clock").innerText = now.toLocaleTimeString();
}

setInterval(showTime, 1000); // تحدث كل ثانية
</script>
JavaScript

🧠 استخدام شائع: زر لبدء/إيقاف المؤقت

<button onclick="start()">ابدأ</button>
<button onclick="stop()">أوقف</button>
<div id="counter">0</div>

<script>
let count = 0;
let intervalId;

function start() {
  intervalId = setInterval(() => {
    count++;
    document.getElementById("counter").innerText = count;
  }, 1000);
}

function stop() {
  clearInterval(intervalId);
}
</script>
JavaScript
⚠️ ملاحظات مهمة:
  • setInterval لن ينتظر انتهاء الكود داخل callback، مما قد يسبب تداخلًا إذا كان التنفيذ يستغرق وقتًا طويلًا.
  • استخدم clearInterval دائمًا عند الانتهاء لتجنب تسريب الذاكرة أو التكرار غير المرغوب.
🔄 الفرق بين setTimeout و setInterval
الخاصيةsetTimeoutsetInterval
التنفيذمرة واحدة فقطبشكل متكرر
الإيقافباستخدام clearTimeoutباستخدام clearInterval
التأخيريبدأ بعد فترة ثم ينفذيبدأ بعد فترة ويتكرر بعدها

⏲️ مثال 1: عداد يزيد كل ثانية

let count = 0;

setInterval(() => {
  count++;
  console.log("العدد الحالي: " + count);
}, 1000); // كل ثانية
JavaScript

⏳ مثال 2: ساعة رقمية حقيقية

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

<script>
  setInterval(() => {
    const now = new Date();
    document.getElementById("clock").innerText = now.toLocaleTimeString();
  }, 1000);
</script>
JavaScript

🔁 مثال 3: تغيير لون الخلفية كل ثانية

<body id="page" style="transition: 0.5s;"></body>

<script>
  setInterval(() => {
    const color = "#" + Math.floor(Math.random()*16777215).toString(16);
    document.getElementById("page").style.backgroundColor = color;
  }, 1000);
</script>
JavaScript

🟢 مثال 4: تحديث عنصر كل 2 ثانية

<p id="status">جارٍ التحديث...</p>

<script>
  let counter = 0;
  setInterval(() => {
    counter++;
    document.getElementById("status").innerText = `تم التحديث ${counter} مرة ✅`;
  }, 2000);
</script>
JavaScript

🛑 مثال 5: إيقاف المؤقت بعد عدد مرات باستخدام clearInterval

let i = 0;
let interval = setInterval(() => {
  console.log("تشغيل رقم " + i);
  i++;
  if (i >= 5) {
    clearInterval(interval); // إيقاف بعد 5 مرات
    console.log("تم الإيقاف 🛑");
  }
}, 1000);
JavaScript

🎮 مثال 6: حركة بسيطة لمربع كل ثانية

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

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