setTimeout 함수는 지정한 시간이 지난 후, 콜백 함수를 Task(Callback) Queue에 넣어줍니다.
지정할 시간은 콜백함수를 큐에 올리기까지의 최소대기 시간입니다.
주의해야 할 점은 콜백함수는 우리가 직접 부르는 것이 아니라, setTimeout이 부릅니다.
사용 방법은 아래와 같습니다.
setTimeout(() => {
console.log('타이머 시간이 지났습니다.');
},1000); // 1s
// 이렇게 작성하면 X
setTimeout(
console.log('**실행 결과가 전달되도록 인자를 전달하면 안됨**')
,1000);
setTimeout함수는 타이머 식별자를 반환합니다.
타이머의 ID라고 생각하면 됩니다.
만약, 타이머의 작동(스케줄링)을 멈추고 싶다면, clearTimeout에 타이머 식별자를 전달하면 됩니다.
const timer = setTimeout(() => {
console.log('타이머');
},10000);
clearTimeout(timer); // 즉시 종료
setInterval 함수는 지정한 시간마다 함수를 실행시킵니다.
아래 예제는 1초마다 ‘타이머’ 문자열이 console에 출력됩니다.
단, 이렇게만 작성하면 타이머를 정지할 수 없습니다.
const timer = setInterval(() => {
console.log('타이머');
},1000);
setTimeout함수는 타이머 식별자를 반환합니다.
let time_count = 0;
const timer = setInterval(() => {
console.log("타이머");
time_count++;
if (time_count === 5) {
clearInterval(timer);
}
}, 1000);
requestAnimationFrame 함수는 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트(repaint) 과정이 진행되기 전에, 해당 애니메이션을 업데이트하는 함수를 호출하도록 합니다.
리플로우(reflow), 리페인트(repaint) 란?
간혹, 현재의 리페인트 과정이 끝나지도 않았는데 다음 좌표로 이동하라고 애니메이션을 수행하는 경우가 있을 수 있습니다.
그래서 브라우저는, 위의 오류를 방지하기 위해 다음 리페인트된 화면에서 수행해야 할 애니메이션 내용을 리페인트 되기 전에 정상적으로 업데이트하기 위해 아래의 방법을 고안한 것입니다.
requestAnimationFrame() 는 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하도록 한다!