374. (javaScript) [간단 소스] 자바스크립트 setTimeout 사용해 일정 시간 작업 예약 핸들러 Handler 지정 및 작업 취소 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트) / setTimeout / Handler

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

  <script>

      // [html 최초 로드 및 이벤트 상시 대기 실시] 
      window.onload = function() {
          console.log("");
          console.log("======================================================");
          console.log("[WebFile] : [window onload] : [start]");
          console.log("------------------------------------------------");
          console.log("Date : " + new Date());
          console.log("======================================================");
          console.log("");

          // ----------------------------------------------------
          // [setTimeout] : 일정 시간 뒤 작업 수행 핸들러 지정
          // ----------------------------------------------------
          var handler_1 = setTimeout(function(){
              console.log("");
              console.log("======================================================");
              console.log("[handler_1] : [start] : " + new Date());
              console.log("======================================================");
              console.log("");

          }, 5000); // [5초 뒤 수행 타이머 지정]

          
          // ----------------------------------------------------
          // [setTimeout] : 일정 시간 뒤 작업 수행 핸들러 지정
          // ----------------------------------------------------
          var handler_2 = setTimeout(function(){
              console.log("");
              console.log("======================================================");
              console.log("[handler_2] : [start] : " + new Date());
              console.log("======================================================");
              console.log("");

              // ----------------------------------------------------
              // [5초 뒤에 수행하는 핸들러 작업 취소 수행]
              // ----------------------------------------------------
              // 핸들러 2 만 실행 되고 핸들러 1 작업은 취소 처리
              // ----------------------------------------------------
              clearTimeout(handler_1);

          }, 2000); // [2초 뒤 수행 타이머 지정]

      }; 

      
  </script>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[결과 출력]
-----------------------------------------------------------------------------------------

======================================================
[WebFile] : [window onload] : [start]
------------------------------------------------
Date : Tue Feb 25 2025 18:46:37 GMT+0900 (한국 표준시)
======================================================


======================================================
[handler_2] : [start] : Tue Feb 25 2025 18:46:39 GMT+0900 (한국 표준시)
======================================================

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

https://developer.mozilla.org/ko/docs/Web/API/Window/setTimeout

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://developer.mozilla.org/ko/docs/Web/API/Window/setTimeout

setTimeout() 전역 함수 - Web API | MDN

---