طريقة Window setInterval()

التعريف والاستخدام

setInterval() بفترة زمنية محددة (بالميللي ثانية).

setInterval() يتم استدعاء الدالة بشكل دوري حتى يتم استدعاء clearInterval() أو إغلاق النافذة.

التعليقات:1 ثانية = 1000 ميللي ثانية.

نصيحة

لتنفيذ الدالة مرة واحدة فقط، استخدم بدلاً من ذلك setTimeout() الطريقة.

لإزالة الفترات، استخدم setInterval() معرف العودة:

myInterval = setInterval(function, milliseconds);

ثم يمكنك إيقاف التنفيذ من خلال استدعاء clearInterval() لإيقاف التنفيذ:

clearInterval(myInterval);

انظر أيضًا:

طريقة clearInterval()

طريقة setTimeout()

طريقة clearTimeout()

المثال

مثال 1

يتم عرض "Hello" مرة كل ثانية (1000 ميللي ثانية):

setInterval(function () {element.innerHTML += "Hello"}, 1000);

جرب بنفسك

مثال 2

يتم استدعاء displayHello مرة كل ثانية:

setInterval(displayHello, 1000);

جرب بنفسك

يوجد المزيد من الأمثلة في الأسفل للصفحة

القواعد

setInterval(function, milliseconds, param1, param2, ...)

المعلمات

المعلمات وصف
function مطلوب. الدالة التي سيتم تنفيذها
milliseconds

مطلوب. فترة الإيقاف

إذا كان القيمة أقل من 10، استخدم 10
param1, param2, ...

اختياري. المعلمات الإضافية التي يتم تمريرها إلى الدالة

IE9 وأقدم إصداراتها لا تدعم

القيمة المعدة

نوع وصف
رقم

معرف التوقيت

يرجى إدخال هذا id مع clearInterval() لإلغاء إيقاف التوقيت

دعم المتصفح

جميع المتصفحات تدعم setInterval()：

كروم IE الجانب فايرفوكس سفاري أوبرا
كروم IE الجانب فايرفوكس سفاري أوبرا
دعم دعم دعم دعم دعم دعم

مزيد من الأمثلة

مثال 3

عرض الوقت كما في الساعة الرقمية:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

جرب بنفسك

مثال 4

استخدام clearInterval() لإيقاف الساعة الرقمية:

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

جرب بنفسك

مثال 5

استخدام setInterval() و clearInterval() لإنشاء شريط التقدم الديناميكي:

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

جرب بنفسك

مثال 6

تبديل لون الخلفية بين اللونين كل 500 ميليسي ثانية:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

جرب بنفسك

مثال 7

تقديم المعلمات إلى الدالة (لا يعمل في إصدارات IE9 وأقل):

setInterval(myFunc, 2000, "param1", "param2");

جرب بنفسك

لكن، إذا كنت تستخدم الدالة غير المسمى، فإنها تنطبق على جميع المتصفحات:

setInterval(function() {myFunc("param1", "param2")}, 2000);

جرب بنفسك