자바스크립트 clearTimeout 함수: 타이머 제거와 관련된 모든 것

clearTimeout이란?

clearTimeout 함수는 실행 중인 setTimeout 함수를 취소하고 해당 타이머 ID를 제거합니다.

const timerId = setTimeout(() => {
  console.log("Hello, world!");
}, 2000);

clearTimeout(timerId); // 타이머 제거

clearTimeout의 활용

다음은, 사용자가 버튼을 누르는 것으로 설정된 예약 제거를 위한 예제입니다.

const button = document.querySelector('button');
let timerId; // 초기에 선언된 timerId 변수

button.addEventListener('click', () => {  
  if (timerId) {
    clearTimeout(timerId); // 버튼을 클릭하면 타이머 제거
    timerId = null; // 변수 초기화
  } else {
    timerId = setTimeout(() => {
      console.log("Button clicked!");
    }, 2000);
  }
});

setTimeout의 리턴 값

setTimeout 함수 호출 시 각 타이머에는 고유한 ID가 할당됩니다. 이 ID를 clearTimeout 함수에 전달하여 해당 타이머의 실행을 취소할 수 있습니다.

따라서 clearTimeout 함수를 사용하여 ID 없이 setTimeout 함수를 취소할 수는 없습니다.

위 예제에서, clearTimeout 후 timerId를 null로 초기화하는 이유는 버튼 클릭 시 timerId가 할당되지 않았을 때 clearTimeout 함수를 호출하지 않도록 하기 위함입니다.

자바스크립트 clearTimeout 함수는 더 이상 실행할 필요가 없는 타이머를 제거하는 데 사용됩니다.

키워드: 자바스크립트 clearTimeout 함수