Trigger Function เมื่อเวลาถึงเวลาที่กำหนดใน JavaScript

วิธีทำ

คำนวณความต่างเวลา (milliseconds) ระหว่าง target time และปัจจุบัน ใช้ setTimeout()

ตัวอย่างโค้ด

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title> 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css"> 
  <style> </style> 
</head> 
<body> 
  <script> 
    function timeToAlert() { 
      alert("The time is 9:36 AM"); 
    } 
    var timeIsBeing936 = new Date("08/09/2020 09:36:00 AM").getTime(); 
    var currentTime = new Date().getTime(); 
    var subtractMilliSecondsValue = timeIsBeing936 - currentTime; 
    setTimeout(timeToAlert, subtractMilliSecondsValue); 
  </script> 
</body> 
</html>

วิธีรัน

บันทึกไฟล์ .html คลิกขวาเลือก "Open with Live Server" ใน VS Code

ผลลัพธ์

คำอธิบาย

new Date("...").getTime() ได้ timestamp (milliseconds since epoch)
targetTime - currentTime = milliseconds ที่ต้องรอ
setTimeout(callback, delay) เรียก callback หลัง delay milliseconds
หมายเหตุ: ถ้า target time ผ่านไปแล้ว delay จะเป็นลบ setTimeout จะ execute ทันที