วิธี setInterval() ของ Window

คำนำออกและการใช้งาน

setInterval() วิธี

setInterval() วิธีนี้จะเรียกใช้ฟังก์ชันเป็นปริมาณที่กำหนด (ในมิลลิเซ็กันด์) clearInterval() หรือปิดหน้าต่าง

หมายเหตุ:1 วินาที = 1000 มิลลิเซ็กันด์

คำเตือน

ถ้าต้องการทำงานครั้งเดียว ใช้ setTimeout() วิธี

ถ้าต้องการลบช่วงเวลา ใช้ setInterval() ID ที่กลับมา

myInterval = setInterval(function, milliseconds);

หลังจากนั้นคุณสามารถเรียก clearInterval() เพื่อหยุดการทำงาน

clearInterval(myInterval);

ดูเพิ่มเติมที่

วิธี clearInterval()

วิธี setTimeout()

วิธีคลอกเวลาออก

ตัวอย่าง

ตัวอย่าง 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

ส่งค่าตัวแปรให้กับฟังก์ชัน (ไม่ทำงานใน IE9 และตัวเดิม):

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

ทดลองด้วยตัวเอง

แต่ถ้าคุณใช้ฟังก์ชันที่ไม่มีชื่อ จะสามารถใช้ได้ทั้งหมดในบราวเซอร์ทุกตัว:

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

ทดลองด้วยตัวเอง