JavaScript에서 특정 시간에 도달하면 함수를 자동으로 트리거하는 방법

JavaScript에서 특정 시간이 되었을 때 자동으로 함수를 실행하고 싶다면, 먼저 해당 날짜와 시간의 타임스탬프(밀리초)를 추출한 뒤 setTimeout()을 사용하여 함수를 호출하면 됩니다.

핵심 원리는 간단합니다. 목표 시각과 현재 시각의 차이를 밀리초 단위로 계산한 후, 그 값을 setTimeout()의 지연 시간으로 지정하는 것입니다. 이렇게 하면 설정한 시각에 정확하게 원하는 함수가 실행됩니다.

예제 코드

<!DOCTYPE html>
<html lang="ko">
<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("현재 시간은 오전 9시 36분입니다");
    }
    var timeIsBeing936 = new Date("08/09/2020 09:36:00 AM").getTime()
    , currentTime = new Date().getTime()
    , subtractMilliSecondsValue = timeIsBeing936 - currentTime;
    setTimeout(timeToAlert, subtractMilliSecondsValue);
</script>
</body>
</html>

코드 설명

timeToAlert(): 지정된 시각에 실행될 함수로, alert 창을 통해 알림을 표시합니다.
new Date("08/09/2020 09:36:00 AM").getTime(): 목표 시각을 밀리초 단위 타임스탬프로 변환합니다.
new Date().getTime(): 현재 시각의 밀리초 값을 가져옵니다.
subtractMilliSecondsValue: 목표 시각에서 현재 시각을 뺀 값, 즉 남은 대기 시간(밀리초)입니다.

실행 방법

위 프로그램을 실행하려면 파일 이름을 "index.html"로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 페이지가 열립니다.

출력 결과

설정한 시각(오전 9시 36분)에 도달하면 다음과 같은 경고(alert) 창이 화면에 나타납니다.

JavaScript에서 특정 시간에 도달하면 함수를 자동으로 트리거하는 방법

참고: setTimeout()은 페이지가 새로고침되면 타이머가 초기화됩니다. 따라서 장기간에 걸친 정확한 스케줄링이 필요하다면, 목표 시각을 localStorage나 서버에 저장해 두고 페이지 로드 시마다 남은 시간을 다시 계산하는 방식을 함께 고려하는 것이 좋습니다.