하루하루 꾸준히, 인생은 되는대로

카테고리 없음

JS /타이머/setTimeout/clearTimeout

긤효중 2022. 6. 26. 01:25

JS_타이머

-호출 스케줄링

함수를 명시적으로 호출하지 않고, 일정 시간이 경과된 이후 호출되도록 함수 호출을 예약 할 떄 ,

타이머 함수를 사용한다.

이것을 호출 스케줄링 scheduiling a call이라고 한다.

자바스크립트에서 타이머 함수 setTimeout, setInterval는 타이머를 생성하고,

cleartimeout, clearinterval는 타이머를 제거한다.

setTimeout, setInterval의 차이점으로는, setTimeout가 생성한 타이머는 단 한 번만,

setInterval가 생성한 타이머는 반복해서 동작한다.

 

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 싱글 스레드인데, 타이머 생성 함수는 비동기 처리 방식이다.

-타이머 함수

setTimeout

var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);

매개변수

 

function

→타이머가 만료된 뒤 실행될 함수이다. (콜백 함수)

 

code

*콜백 함수 대신 코드를 문자열로 전달 할 수 있다. (사용이 권장되지는 않는다.)

 

delay

→주어진 함수 또는 코드를 실행하기 전 기다릴 밀리초(ms) 단위 시간.

예를 들어서, delay가 1000이라면 1초, 10000이라면 10초이다.

만약 5초 뒤에 실행하고자 하는 경우, 다음과 같이 사용 할 수 있다.

*delay가 4ms 이하인 경우, 최소 지연 시간 4ms가 지정된다.

setTimeout(function(){
	console.log('Good!');
},5000);

//5초 뒤에 익명 함수 실행

 

delay가 생략되거나 0인 경우 콜백 함수가 즉시 실행되는 것은 보장되지 않는다.

 

arg1,arg2..

→ 콜백 함수에 추가될 매개변수이다.

IE9이하에서는 콜백 함수에 매개변수를 전달 할 수 없다

setTimeout(function(){
	console.log('Hi');
},1000);

//1초 뒤에 콜백 함수 실행

setTimeout(function(name){
console.log(`Hi! ${name}`);
},1000,'KIM');

//1초 뒤 콜백 함수가 실행되는데 KIM이 인수로 전달된다.

setTimeout(function(){
	console.log('JS');
};
//delay를 생략 시 기본으로 0

 

setTimeout()의 반환 값?

setTimeout() 함수는 생성된 타이머를 구분 할 수 있도록, 고유한 타이머 ID를 반환한다.

이떄, 브라우저 환경의 경우 숫자이며, Node.js의 경우 객체이다.

clearTimeout()은 setTimeout()가 반환한 타이머 ID를 이용해 타이머를 취소 할 수 있다.

const timeID = setTimeout(function(){
console.log('HHH');
});

clearTimeout(timeID);

비동기 방식으로 작업

setTimeout은 다른 함수의 호출을 막지 못한다.

 

setTimeout(function(){
	console.log('Hi');
},5000);

setTimeout(function(){
	console.log('HIHI');
},3000);

setTimeout(function(){
	console.log('HIHIHI');
},1000);


//콘솔 결과
HIHIHI
HIHI
HI