[Javascript] setTimeout / setInterval

setTimeout

: 일정 시간이 지난 후 함수를 실행

 

function fn(){
    console.log(3)
}

setTimeout(fn, 3000);

setTimeout은 두 개의 매개변수를 갖는다.

첫 번째는 일정 시간이 지난 뒤 실행하는 함수이고, 두 번째는 시간이다. 3000은 3초를 의미한다.

 

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

함수를 매개변수 안에 직접 쓰는 것도 가능하다.

 

const tId = function showName(name){
    console.log(name);
}

setTimeout(showName, 3000, 'Mike');

clearTimeout(tId);

함수에 인수가 필요하다면 시간 뒤에 적어준다. 'Mike'는 name에 전달된다.

clearTimeout은 예정된 작업을 없앤다. setTimeout이 반환하는 time id를 이용해 스케줄링을 취소할 수 있다. 위 코드에서는 3초가 지나기 전에 clearTimeout이 실행되기 때문에 아무 일도 일어나지 않는다. 

 

 

setInterval

: 일정 시간 간격으로 함수를 반복

 

function showName(name){
    console.log(name);
}

const tId = setInterval(showName, 3000, 'Mike');

3초마다 'Mike'가 찍힌다. 중단하려면 clearInterval을 실행하면 된다.

 

※ delay = 0?

setTimeout(function(){
    console.log(2)
}, 0);

console.log(1);

delay time을 0으로 줘도 바로 실행되지는 않는다. 1이 먼저 찍히고 2가 나중에 찍힌다. 현재 실행 중인 스크립트가 종료된 이후 스케줄링 함수를 실행하기 때문이다. 그리고 브라우저는 기본적으로 4ms 정도의 delay time이 있다.