ตัวอย่าง
การแจ้งเตือน "Hello" ทุกๆ 3 วินาที (3000 milliseconds) :
setInterval(function(){ alert("Hello"); }, 3000);
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
setInterval() วิธีการเรียกใช้ฟังก์ชันหรือประเมินการแสดงออกในช่วงเวลาที่กำหนด (in milliseconds)
setInterval() วิธีการจะยังคงเรียกใช้ฟังก์ชันจนกว่า clearInterval() ถูกเรียกหรือหน้าต่างถูกปิด
ค่า ID ที่ส่งกลับโดย setInterval() ถูกนำมาใช้เป็นพารามิเตอร์สำหรับ clearInterval() วิธีการ
Tip: 1,000 มิลลิวินาที = 1 วินาที
เคล็ดลับ: เมื่อต้องการดำเนินการฟังก์ชั่นเพียงครั้งเดียวหลังจากระบุจำนวนมิลลิวินาทีใช้ setTimeout() วิธีการ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| setInterval() | 1.0 | 4.0 | 1.0 | 1.0 | 4.0 |
วากยสัมพันธ์
setInterval( function,milliseconds,param1,param2,... )ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ |
|---|---|
| function | จำเป็นต้องใช้ ฟังก์ชั่นที่จะต้องถูกประหารชีวิต |
| milliseconds | จำเป็นต้องใช้ ช่วงเวลา (in milliseconds) บนความถี่ในการเรียกใช้รหัส |
| param1,param2,... | ไม่จำเป็น. พารามิเตอร์เพิ่มเติมที่จะส่งผ่านไปยังฟังก์ชั่น (ยังไม่ได้รับการสนับสนุนใน IE9 และก่อนหน้า) |
รายละเอียดทางเทคนิค
| กลับค่า: | หมายเลขแทนค่า ID ของตัวจับเวลาที่กำหนดไว้ ใช้ค่านี้กับ clearInterval() วิธีการที่จะยกเลิกการจับเวลา |
|---|
ตัวอย่างอื่น ๆ
ตัวอย่าง
นอกจากนี้คุณยังสามารถหมายถึง "named" ฟังก์ชั่น; การแจ้งเตือน "Hello" ทุกๆ 3 วินาที (3000 milliseconds) :
var myVar;
function myFunction() {
myVar =
setInterval(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
ลองตัวเอง» ตัวอย่าง
แสดงเวลาปัจจุบัน (the setInterval() วิธีการจะดำเนินการฟังก์ชั่นทุกๆ 1 วินาทีเช่นเดียวกับนาฬิกาดิจิตอล):
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
} ลองตัวเอง» ตัวอย่าง
ใช้ clearInterval() จะหยุดเวลาในตัวอย่างก่อนหน้านี้:
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function myStopFunction()
{
clearInterval(myVar);
} ลองตัวเอง» ตัวอย่าง
ใช้ setInterval() และ clearInterval() เพื่อสร้างแถบความคืบหน้าแบบไดนามิก:
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
} ลองตัวเอง» ตัวอย่าง
สลับไปมาระหว่างสองสีพื้นหลังหนึ่งครั้งทุก 300 มิลลิวินาที:
var myVar = setInterval(function(){ setColor() }, 300);
function
setColor() {
var x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" :
"yellow";
}
function stopColor() {
clearInterval(myVar);
} ลองตัวเอง» ตัวอย่าง
ผ่านพารามิเตอร์ไปยังฟังก์ชัน alertFunc (does not work in IE9 and earlier) :
var myVar;
function myStartFunction() {
myVar
= setInterval(alertFunc, 2000, "First param", "Second param");
} ลองตัวเอง» แต่ถ้าคุณใช้ฟังก์ชั่นที่ไม่ระบุชื่อก็จะทำงานในเบราว์เซอร์ทั้งหมด:
var myVar;
function myStartFunction() {
myVar =
setInterval(function(){ alertFunc("First param", "Second param"); },
2000);
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
วัตถุหน้าต่าง: href="met_win_clearinterval.html"> clearInterval() Method
วัตถุหน้าต่าง: href="met_win_settimeout.html"> setTimeout() Method
วัตถุหน้าต่าง: href="met_win_cleartimeout.html"> clearTimeout() Method
<หน้าต่างวัตถุ