setTimeout, setInterval

mangojang·2023년 1월 27일

JavaScript

차근차근 쌓아가는 JS 기초

목록 보기

7/20

✍️ setTimeout, setInterval 공부하다가 재귀 호출에 관한 부분이 흥미로워 글로 정리해보았다. 더불어 setInterval을 이용한 스톱워치도 구현해 보았다.

setTimout, clearTimeout

setTimeout

setTimeout(code, delay)

일정 시간이 지난 후에 함수 실행.

⚠️ code로 함수를 넘길 때 함수 뒤에 () 를 붙이면 안 됨.

➡️ 함수를 실행 시키는 뜻이 되어 함수 결과가 넘어 감.
함수 실행에 대한 스케줄링을 주려고 한다면 ()를 붙이지 않은 함수 자체를 넘겨야 함.

clearTimeout

clearTimeout(timeoutID)

setTimeout 취소 시 사용.

function Hello (){
	alert('hello!')
}

setTimeout(Hello,2000); // 2초 뒤에 Hello 함수 실행

let timeoutID = setTimeout(Hello, 3000);
clearTimeout(timeoutID); // 3초 뒤의 Hello 함수는 실행 안됨.

setInterval, clearInterval

setInterval

setInterval(code, delay)

일정 시간 간격을 두고 함수 실행.

clearInterval

clearInterval(intervalID)

setInterval 취소 시 사용.

function Hello (){
	console.log('hello!')
}

let intervalID = setInterval(Hello, 2000); // 2초 마다 Hello 함수 실행 

setTimeout(()=>{clearInterval(intervalID); }, 5000); // 5초 뒤에 setInterval 해제

// 결과: 'hello!' 는 2번 찍힘.

활용

setTimeout으로 setInterval 구현하기

setTimeout을 재귀 호출 하는 방법을 이용하여 setInterval 구현 가능
setTimeout 과 setInterval 동작 차이
- setTimeout은 ****함수 실행 완료 이후부터 시간을 셈.
- setInterval은 함수 실행 시작부터 시간을 셈.

// 2초마다 Hello! 실행
let timerId = setTimeout(function Hello() {
  ~~~~~~~~~~~~~~~~~~~~~~console.log~~~~~~~~~~~~~~~~~~~~~~('Hello!');
  timerId = setTimeout(Hello, 2000);
}, 2000);

// 중지
clearTimeout(timerId);