หน้าต่าง setInterval()
ตัวอย่าง
แสดง "สวัสดี" ทุกวินาที (1,000 มิลลิวินาที):
setInterval(function () {element.innerHTML += "Hello"}, 1000);
โทร displayHello ทุกวินาที:
setInterval(displayHello, 1000);
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
setInterval()
เมธอดเรียกใช้ฟังก์ชันตามช่วงเวลาที่กำหนด (หน่วยเป็นมิลลิวินาที)
เมธอด จะsetInterval()
เรียกใช้ฟังก์ชันต่อไปจนกว่า
clearInterval()
จะมีการเรียก หรือหน้าต่างถูกปิด
1 วินาที = 1,000 มิลลิวินาที
บันทึก
หากต้องการเรียกใช้ฟังก์ชันเพียงครั้งเดียว ให้ใช้setTimeout()
วิธีการแทน
หากต้องการล้างช่วงเวลา ให้ใช้id ที่ ส่งคืนจาก setInterval():
myInterval = setInterval(function, milliseconds);
จากนั้นคุณสามารถหยุดการดำเนินการได้โดยเรียก clearInterval():
clearInterval(myInterval);
ดูสิ่งนี้ด้วย:
ไวยากรณ์
setInterval(function, milliseconds, param1, param2, ...)
พารามิเตอร์
Parameter | Description |
function | Required. The function to execute |
milliseconds | Required. The execution interval. If the value is less than 10, 10 is used |
param1, param2, ... | Optional. Additional parameters to pass to the function Not supported in IE9 and earlier. |
คืนมูลค่า
พิมพ์ | คำอธิบาย |
หมายเลข | รหัสของตัวจับเวลา ใช้ ID นี้กับ clearInterval() เพื่อยกเลิกตัวจับเวลา |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
แสดงเวลาเหมือนนาฬิกาดิจิตอล:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
ตัวอย่าง
ใช้ clearInterval() เพื่อหยุดนาฬิกาดิจิตอล:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
ตัวอย่าง
ใช้ 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 + '%';
}
}
}
ตัวอย่าง
สลับระหว่างสีพื้นหลังสองสีทุกๆ 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);
}
ตัวอย่าง
ส่งพารามิเตอร์ไปยังฟังก์ชัน (ไม่ทำงานใน IE9 และรุ่นก่อนหน้า):
setInterval(myFunc, 2000, "param1", "param2");
อย่างไรก็ตาม หากคุณใช้ฟังก์ชันที่ไม่ระบุตัวตน ฟังก์ชันนี้จะทำงานได้ในทุกเบราว์เซอร์:
setInterval(function() {myFunc("param1", "param2")}, 2000);
รองรับเบราว์เซอร์
setInterval()
รองรับในทุกเบราว์เซอร์:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |