วิธี setInterval() ของ Window
- หน้าก่อน self
- หน้าต่อไป setTimeout()
- กลับไปยังเพจที่ย้อนกลับ วัตถุ Window
คำนำออกและการใช้งาน
setInterval()
วิธี
setInterval()
วิธีนี้จะเรียกใช้ฟังก์ชันเป็นปริมาณที่กำหนด (ในมิลลิเซ็กันด์) clearInterval() หรือปิดหน้าต่าง
หมายเหตุ:1 วินาที = 1000 มิลลิเซ็กันด์
คำเตือน
ถ้าต้องการทำงานครั้งเดียว ใช้ setTimeout()
วิธี
ถ้าต้องการลบช่วงเวลา ใช้ setInterval()
ID ที่กลับมา
myInterval = setInterval(function, milliseconds);
หลังจากนั้นคุณสามารถเรียก clearInterval()
เพื่อหยุดการทำงาน
clearInterval(myInterval);
ดูเพิ่มเติมที่
ตัวอย่าง
ตัวอย่าง 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);
- หน้าก่อน self
- หน้าต่อไป setTimeout()
- กลับไปยังเพจที่ย้อนกลับ วัตถุ Window