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