روش setInterval() Window

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

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

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

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

توضیحات

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

برای پاک کردن تناوب، از setInterval() id بازگشتی:

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()

کروم آئی‌ای ایج فایرفاکس سافاری آپرا
کروم آئی‌ای ایج فایرفاکس سافاری آپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

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

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

亲自试一试