เหตุการณ์การกำหนดเวลา JavaScript

สารบัญ

    แสดงสารบัญ

JavaScript สามารถดำเนินการได้ในช่วงเวลา

สิ่งนี้เรียกว่าเหตุการณ์การกำหนดเวลา

1
2
3
4
5
6
7
8
9
10
11
12

เหตุการณ์กำหนดเวลา

วัตถุ window อนุญาตให้เรียกใช้โค้ดตามช่วงเวลาที่กำหนด

ช่วงเวลาเหล่านี้เรียกว่าเหตุการณ์กำหนดเวลา

สองวิธีสำคัญที่จะใช้กับ JavaScript คือ:

  • setTimeout(function, milliseconds)
    ดำเนินการฟังก์ชันหลังจากรอตามจำนวนมิลลิวินาทีที่ระบุ

  • setInterval(function, milliseconds)
    เหมือนกับ setTimeout() แต่ดำเนินการซ้ำ ของฟังก์ชันอย่างต่อเนื่อง

setTimeout() และ setInterval() เป็นทั้งสองวิธีของวัตถุหน้าต่าง HTML DOM

เมธอด setTimeout()

window.setTimeout(function, milliseconds);

วิธีการ window.setTimeout() สามารถเขียนได้โดยไม่ต้องใช้คำนำหน้าหน้าต่าง

พารามิเตอร์แรกคือฟังก์ชันที่จะดำเนินการ

พารามิเตอร์ตัวที่สองระบุจำนวนมิลลิวินาทีก่อนดำเนินการ

ตัวอย่าง

คลิกปุ่ม รอ 3 วินาที จากนั้นเพจจะแจ้งเตือน "สวัสดี":

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

    <script>
function myFunction() {
  alert('Hello');
    }
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

จะหยุดการประหารชีวิตได้อย่างไร?

วิธีการ 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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

เมธอด setInterval()

setInterval() วิธีการทำซ้ำฟังก์ชันที่กำหนดในทุก ๆ ที่กำหนด ช่วงเวลา

window.setInterval(function, milliseconds);

วิธีการ window.setInterval() สามารถเขียนได้โดยไม่ต้องใช้คำนำหน้าหน้าต่าง

พารามิเตอร์แรกคือฟังก์ชันที่จะดำเนินการ

พารามิเตอร์ที่สองระบุความยาวของช่วงเวลาระหว่างแต่ละรายการ การดำเนินการ

ตัวอย่างนี้เรียกใช้ฟังก์ชันที่เรียกว่า "myTimer" ทุกๆ วินาที (เช่น ฟังก์ชันดิจิทัล ดู).

ตัวอย่าง

แสดงเวลาปัจจุบัน:

setInterval(myTimer, 1000);
 
function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

มี 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>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<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>

</body>
</html>

ตัวอย่างเพิ่มเติม

อีกช่วงเวลาที่เรียบง่าย

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

นาฬิกาที่สร้างขึ้นด้วยเหตุการณ์การกำหนดเวลา

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>