[자바스크립트 필기] #23 - 타이머

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

1. 호출 스케줄링 

일정시간이 지나고 나서 함수가 호출되도록 하려면 타이머 함수를 사용해야한다. 이를 호출 스케줄링이라 한다.

자바스크립트에서는 타이머를 생성할 수 있는 setTimeout과 setInterval, 타이머를 제거할 수 있는 clearTimeout과 clearInterval을 제공한다. 

여기서 setTimeout과 setInterval은 비동기 처리방식으로 동작한다. 

 

2. 타이머 함수 

setTimeout / clearTimeout

setTimeout 함수는 ms단위로 받은 두번째 인수의 시간으로 첫번째 함수를 단 한번 실행하는 타이머를 생성한다. 

• 첫 번째 매개변수 : 타이머가 만료된 뒤 호출될 콜백 함수 
• 두 번째 매개변수 : 타이머 만료 시간(밀리초(ms) 단위)
• 세 번째 매개변수 : 콜백 함수에 전달해야 할 인수가 있으면 세 번째 인수를 통해 전달할 수 있다. 

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. 
setTimeout(() => console.log('Hi!'), 1000);

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. 
setTimeout(name => console.log(`Hi! ${name}`), 1000, 'Lee');

// 두 번째 인수를 생략하면 기본값 0이 지정된다. 
setTimeout(() => console.log('Hello!'));

setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. 이것을 clearTimeout 함수에 전달해서 타이머를 취소할 수 있다. 

const timerId = setTimeout(() => console.log('Hi!'), 1000);

clearTimeout(timerId);

 

setInterval / clearInterval 

setInterval 함수도 setTimeout 함수와 거의 비슷하다. 다만 setInterval 함수는 계속해서 반복 동작하는 타이머를 생성한다. 반환된 타이머 id를 통해 clearInterval 함수로 타이머를 취소시킬 수 있다. 

let count = 1;

// 1초 후 타이머가 만료될 때마다 콜백 함수가 호출된다. 
// setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다. 
const timeoutId = setInterval(() => {
    console.log(count); // 1 2 3 4 5
    // count가 5이면 setInterval 함수가 반환한 타이머 id를 clearInterval 함수에 전달해서 
    // 타이머를 취소할 수 있다. 
    if(count++ === 5) clearInterval(timeoutId);
}, 1000);

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!