Kích hoạt hàm JavaScript khi đạt thời gian cụ thể

Để thực thi một hàm khi thời gian đạt đến một mốc xác định, ta lấy thời gian mục tiêu và thời gian hiện tại, tính chênh lệch (milliseconds), sau đó dùng setTimeout().

Ví dụ

<!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("Bây giờ là 9:36 AM");
    }

    var targetTime = new Date("08/09/2020 09:36:00 AM").getTime();
    var currentTime = new Date().getTime();
    var delayMs = targetTime - currentTime;

    setTimeout(timeToAlert, delayMs);
  </script>
</body>
</html>

Lưu file index.html và mở bằng Live Server trong VS Code.

Kết quả

Khi đồng hồ hệ thống đạt 09:36:00 AM ngày 09/08/2020, hộp thoại cảnh báo sẽ hiện ra.

Lưu ý: Nếu delayMs âm (thời điểm đã qua), setTimeout sẽ thực thi gần như ngay lập tức. Trong ứng dụng thực tế, nên kiểm tra if (delayMs > 0) trước khi gọi.