SetTimeout

✅ ما هو setTimeout؟

هي دالة مدمجة في JavaScript تُستخدم لتنفيذ كود مرة واحدة فقط بعد تأخير معين (بالمللي ثانية).

📌 الصيغة العامة:

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

✅ مثال بسيط:

setTimeout(function() {
  console.log("مرحباً بعد 3 ثواني");
}, 3000); // 3000ms = 3 ثواني
JavaScript

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

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

setTimeout(sayHello, 2000, "ياسين");
JavaScript

❌ ما هو clearTimeout؟

تُستخدم لإلغاء مؤقّت setTimeout قبل أن يتم تنفيذه.

📌 الصيغة:

clearTimeout(timeoutID);
JavaScript

✅ مثال على الإلغاء:

let timeoutID = setTimeout(() => {
  console.log("لن يتم تنفيذ هذا");
}, 5000);

clearTimeout(timeoutID); // تم الإلغاء قبل التنفيذ
JavaScript

🧠 استخدام شائع: زر لإلغاء مؤقّت

<button onclick="startTimer()">ابدأ المؤقت</button>
<button onclick="cancelTimer()">إلغاء</button>

<script>
let timerId;

function startTimer() {
  timerId = setTimeout(() => {
    alert("تم التنفيذ بعد 5 ثواني");
  }, 5000);
}

function cancelTimer() {
  clearTimeout(timerId);
  alert("تم إلغاء المؤقّت");
}
</script>
JavaScript
⚠️ ملاحظات هامة:
  • delay يتم حسابه بالـ milliseconds (1000 ms = 1 ثانية).
  • الدالة تُنفّذ مرة واحدة فقط، وليس بشكل متكرر (إذا أردت تكرار استخدم setInterval).
  • إذا كان الوقت = 0، فإن JavaScript ستنتظر إلى أن ينتهي الكود الحالي أولًا (غير فوري تمامًا).

🧪 تمرين متقدم: عد تنازلي مؤقت باستخدام setTimeout

<div id="counter">5</div>

<script>
let count = 5;

function countdown() {
  document.getElementById("counter").innerText = count;
  count--;
  if (count >= 0) {
    setTimeout(countdown, 1000);
  } else {
    alert("انتهى الوقت!");
  }
}

countdown();
</script>
JavaScript

✅ 2. تغيير محتوى عنصر في الصفحة:

<p id="msg">جاري التحميل...</p>

<script>
  setTimeout(() => {
    document.getElementById("msg").innerText = "تم التحميل ✅";
  }, 2000);
</script>
JavaScript

✅ 3. تأخير تنفيذ دالة:

function greet() {
  console.log("مرحبًا بك في موقعنا 🌐");
}

setTimeout(greet, 1000); // تنفذ بعد ثانية
JavaScript

✅ 4. تكرار مؤقت (باستخدام setTimeout بدل setInterval)

function sayHi() {
  console.log("أهلاً!");
  setTimeout(sayHi, 1000); // تكرار ذاتي
}

setTimeout(sayHi, 1000);
JavaScript

✅ 5. إلغاء المؤقت باستخدام clearTimeout

let timeoutId = setTimeout(() => {
  console.log("لن يتم تنفيذ هذا");
}, 5000);

clearTimeout(timeoutId); // إلغاء المؤقت قبل أن ينفذ
JavaScript

✅ 6. تنفيذ تسلسل عمليات بتأخير:

setTimeout(() => {
  console.log("1️⃣ أول خطوة");
  setTimeout(() => {
    console.log("2️⃣ ثاني خطوة");
    setTimeout(() => {
      console.log("3️⃣ ثالث خطوة");
    }, 1000);
  }, 1000);
}, 1000);
JavaScript

مثال 1: إظهار رسالة ترحيبية بعد 3 ثواني من دخول المستخدم

<body>
  <h1>مرحبًا بك في موقعي!</h1>
  <p id="welcome"></p>

  <script>
    setTimeout(() => {
      document.getElementById("welcome").innerText = "👋 سعيد بزيارتك!";
    }, 3000);
  </script>
</body>
JavaScript

⏳ مثال 2: إظهار زر بعد تأخير

<button id="delayedBtn" style="display:none;">اضغط هنا</button>

<script>
  setTimeout(() => {
    document.getElementById("delayedBtn").style.display = "block";
  }, 5000);
</script>
JavaScript

🛑 مثال 3: إغلاق إشعار بعد فترة

<div id="alert" style="padding: 10px; background: red; color: white;">
  ⚠️ تنبيه: هذا إشعار مؤقت!
</div>

<script>
  setTimeout(() => {
    document.getElementById("alert").style.display = "none";
  }, 4000);
</script>
JavaScript

📦 مثال 4: محاكاة تحميل بيانات (Fake Loading)

<div id="loader">⏳ جاري التحميل...</div>
<div id="data" style="display: none;">📦 هذه هي البيانات المحمّلة!</div>

<script>
  setTimeout(() => {
    document.getElementById("loader").style.display = "none";
    document.getElementById("data").style.display = "block";
  }, 3000);
</script>
JavaScript

🧠 مثال 5: تمرين بسيط – سؤال وجواب

<h2>ما عاصمة مصر؟</h2>
<p id="answer">جاري التفكير...</p>

<script>
  setTimeout(() => {
    document.getElementById("answer").innerText = "📍 القاهرة";
  }, 2000);
</script>
JavaScript