[javascript] settimeout() 함수

728x90

목 차

• 1. setTimeout() 함수란?
• 2. 기본 구조
• 3. 사용 방법
• 4. setTimeout 취소하기 : clearTimeout() 함수
• 5. 주의사항
• 6. 요약

 

1. setTimeout() 함수란?

• setTimeout() 함수는 JavaScript에서 일정 시간이 지난 후에 특정 코드를 실행시키기 위해 사용되는 함수입니다. 비동기적인 작업을 처리할 때 매우 유용하며, 주로 타이머 역할을 하거나 지연된 작업을 처리할 때 사용됩니다.

 

2. 기본 구조

setTimeout(function, delay);

• function: 지정된 시간이 지난 후 실행할 함수입니다. 함수 표현식이나 익명 함수로 전달할 수 있습니다.
• delay: 함수가 실행되기 전에 기다릴 시간(밀리초 단위)입니다. 1초는 1000밀리초입니다.

 

3. 사용 방법

• 아래 코드는 3초(3000밀리초) 후에 콘솔에 "3초 후에 이 메시지가 출력됩니다."라는 문장을 출력합니다.

setTimeout(function() {
  console.log("3초 후에 이 메시지가 출력됩니다.");
}, 3000);

 

• 화살표 (Arrow) 함수를 사용하면 코드가 더 간결해질 수 있습니다.

setTimeout(() => {
  console.log("2초 후에 출력됩니다.");
}, 2000);

 

4. setTimeout 취소하기 : clearTimeout() 함수

• setTimeout은 고유한 타이머 ID를 반환합니다. 이 ID를 clearTimeout() 함수에 전달하여 타이머를 취소할 수 있습니다.

const timeoutId = setTimeout(() => {
  console.log("이 메시지는 출력되지 않습니다.");
}, 5000);

clearTimeout(timeoutId);  // 타이머 취소, 함수 실행 안 됨

 

5. 주의사항

• 비동기 실행: setTimeout()은 JavaScript의 이벤트 루프에서 비동기적으로 작동합니다. 즉, 지정한 시간이 지나도 바로 실행되지 않을 수 있으며, 이벤트 루프에 대기 중인 다른 작업이 먼저 처리된 후 실행될 수 있습니다.
• 정확한 시간 보장 불가: setTimeout()에서 지정한 시간이 정확하게 보장되지는 않습니다. 이벤트 루프에서 다른 작업이 먼저 처리되면, 그 후에 실행됩니다.
• 0ms 딜레이: setTimeout()에서 delay를 0으로 설정할 수도 있습니다. 이렇게 하면 그 함수는 현재 실행 중인 작업이 모두 완료된 후 바로 실행됩니다. 이는 JavaScript의 비동기 처리 방식과 관련이 있습니다.

 

 

6. 요약

• setTimeout()은 비동기 작업을 간단하게 처리하거나, 시간 간격을 두고 특정 작업을 지연시켜야 할 때 매우 유용한 함수입니다.