JavaScript Timing Events
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript สามารถดำเนินการได้ในช่วงเวลา นี้เรียกว่าเหตุการณ์เวลา |
เหตุการณ์เวลา
วัตถุwindowอนุญาตให้เรียกใช้รหัสในช่วงเวลาที่กำหนด
ช่วงเวลาเหล่านี้เรียกว่าเหตุการณ์เวลา
วิธีการหลักสองวิธีที่จะใช้กับ JavaScript คือ:
setTimeout(function, milliseconds)
เรียกใช้ฟังก์ชัน หลังจากรอตามจำนวนมิลลิวินาทีที่ระบุsetInterval(function, milliseconds)
เหมือนกับ setTimeout() แต่ทำซ้ำการทำงานของฟังก์ชันอย่างต่อเนื่อง
และ เป็น setTimeout()ทั้งsetInterval()สองวิธีของวัตถุ HTML DOM Window
เมธอด setTimeout()
window.setTimeout(function, milliseconds);
วิธี การwindow.setTimeout()นี้สามารถเขียนได้โดยไม่ต้องมีหน้าต่างนำหน้า
พารามิเตอร์แรกคือฟังก์ชันที่จะดำเนินการ
พารามิเตอร์ที่สองระบุจำนวนมิลลิวินาทีก่อนดำเนินการ
ตัวอย่าง
คลิกที่ปุ่ม รอ 3 วินาทีและหน้าจะแจ้งเตือน "สวัสดี":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
จะหยุดการดำเนินการได้อย่างไร
เมธอด นี้clearTimeout()จะหยุดการทำงานของฟังก์ชันที่ระบุใน setTimeout()
window.clearTimeout(timeoutVariable)
วิธี การwindow.clearTimeout()นี้สามารถเขียนได้โดยไม่ต้องมีหน้าต่างนำหน้า
clearTimeout()เมธอดใช้ตัวแปรที่ส่งคืนจากsetTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
หากฟังก์ชันยังไม่ได้ดำเนินการ คุณสามารถหยุดการดำเนินการได้โดยเรียกใช้clearTimeout()
เมธอด:
ตัวอย่าง
ตัวอย่างเดียวกับด้านบน แต่มีปุ่ม "หยุด" ที่เพิ่มเข้ามา:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
เมธอด setInterval()
เมธอด จะsetInterval()ทำซ้ำฟังก์ชันที่กำหนดในทุกช่วงเวลาที่กำหนด
window.setInterval(function, milliseconds);
วิธี การwindow.setInterval()นี้สามารถเขียนได้โดยไม่ต้องมีหน้าต่างนำหน้า
พารามิเตอร์แรกคือฟังก์ชันที่จะดำเนินการ
พารามิเตอร์ที่สองระบุความยาวของช่วงเวลาระหว่างการดำเนินการแต่ละครั้ง
ตัวอย่างนี้เรียกใช้ฟังก์ชันที่เรียกว่า "myTimer" ทุกๆ วินาที (เช่น นาฬิกาดิจิตอล)
ตัวอย่าง
แสดงเวลาปัจจุบัน:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
มี 1,000 มิลลิวินาทีในหนึ่งวินาที
จะหยุดการดำเนินการได้อย่างไร
เมธอดจะหยุด การclearInterval()ทำงานของฟังก์ชันที่ระบุในเมธอด setInterval()
window.clearInterval(timerVariable)
วิธี การwindow.clearInterval()นี้สามารถเขียนได้โดยไม่ต้องมีหน้าต่างนำหน้า
clearInterval()เมธอดใช้ตัวแปรที่ส่งคืนจากsetInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
ตัวอย่าง
ตัวอย่างเดียวกันกับด้านบน แต่เราได้เพิ่มปุ่ม "หยุดเวลา":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>