روش setInterval() Window

تعریف و استفاده

setInterval() روش با فاصله زمانی مشخصی (به میلی‌ثانیه) تابع را فراخوانی کند.

setInterval() این روش به صورت دوره‌ای تابع را فراخوانی می‌کند، تا زمانی که clearInterval() یا پنجره را ببندید.

نکته:1 ثانیه = 1000 میلی‌ثانیه.

توضیحات:

برای اجرای یک بار تابع، از setTimeout() روش استفاده کنید.

برای لغو تایمر با استفاده از setInterval() آیدی بازگشتی:

myInterval = setInterval(function, milliseconds);

سپس می‌توانید با فراخوانی clearInterval() برای توقف اجرا استفاده کنید:

clearInterval(myInterval);

لطفاً به

روش clearInterval()

روش setTimeout()

روش clearInterval()

مثال‌ها

مثال 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 تایمر

لطفاً این id را با clearInterval() برای لغو تایمر از آن استفاده کنید.

پشتیبانی مرورگر

همه مرورگرها از آن پشتیبانی می‌کنند setInterval():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی از پشتیبانی از پشتیبانی از پشتیبانی از پشتیبانی از پشتیبانی از

مثال‌های بیشتر

مثال 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

پارامترها را به تابع ارسال کنید (در نسخه‌های 9 و قدیمی‌تر IE کار نمی‌کند):

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

آزمایش کنید

اما اگر از تابع ناشناس استفاده کنید، در همه مرورگرها مناسب است:

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

آزمایش کنید