본문 바로가기

공부 자료/자바스크립트[JS]

[JS] 타이머 / setTimeout(), setInterval()

일정 시간 이후 실행을 위한 setTimeout()
주기적으로 반복 실행을 위한 setInterval()

 

[setTimeout() 함수]

[기본 형식]

setTimeout(() => {코드, 시간(ms)});

- 코드를 바로 실행하는 것이 아닌 일정 시간을 기다린 후 코드를 실행해야 하는 경우가 존재할 때 사용

 

[가변 변수 이용]

function add(x+y){
	console.log(x+y);
}
setTimeout(add, 2000, 3, 4); // 2초 후 7 출력

- setTimeout() 함수의 경우 세번째 인자부터 가변 변수를 받을 수 있어, 첫번째에서 넘어온 함수가 인자를 받는 경우 이 함수에 넣은 변수를 명시하기 위해 사용

 

[함수 실행 취소]

function add(x+y){
	console.log(x+y);
}

const timeoutId = setTimeout(add, 2000, 3, 4);
clearTimeout(timeoutId);

- setTimeout() 함수의 경우에는 타임아웃 아이디 숫자를 반환하는데 이 아이디는 함수 호출 시 내부적으로 생성됨

- 아이디가 있을 경우 clearTimeout을 통해 해당 함수 실행을 취소할 수 있음


[setInterval() 함수]

[기본 형식]

setInterval(()=> {코드, 시간(ms)});

- 코드가 설정된 시간이 지나면 반복 실행

 

[함수 실행 취소]

 

let count=0;
const intervalId = setInterval(() => console.log(count+1), 2000); // 2초마다 count 1씩 증가

clearInterval(intervalId);

- setInterval() 함수의 경우에는 인터벌 아이디 숫자를 반환하는데 이 아이디는 함수 호출 시 내부적으로 생성됨

- 아이디가 있을 경우 clearTimeout을 통해 해당 함수 실행을 취소할 수 있음