자바스크립트 - setTimeout/setInterval

setTimeout

 

일정 시간이 지난 후 함수를 실행합니다.

 

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


setTimeout(fn,3000);

이 코드는 3초후에 로그를 찍어줍니다. 

setTimeOut함수는 두 개의 매개변수를 받습니다.

첫번째매개변수에는 일정시간이 지난 후에 실행해주는 함수이고, 두번째매개변수는 시간입니다. 

위의코드에서 3000은 3s(3초)를 의미합니다.

 

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

또한 이렇게 함수를 전달하지 않고 직접 코드를 사용할 수 있습니다.

 

만약 인수가 필요하다면 시간 뒤에 해당 값을 넣어주면 됩니다.

 

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

setTimeout(showName,3000,'Mike');

 

 

clearTimeout()

clearTimeout()은 예정된 작업을 없애주는 메소드입니다. 

setTimeout()은 Id를 반환합니다. 

function showName(name){
    console.log(name);
}
const tId = setTimeout(showName,3000,'Mike'); 

clearTimeout(tId);

3초가 지난 후에 실행되는 코드이기 때문에 clearTimeout()을 사용하면 아무런 일도 일어나지 않습니다.

 

 

setInterval

일정 시간 간격으로 함수를 반복합니다.

setInterval도 마찬가지로 Id를 반환합니다.

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

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

 

setInterval은 setTimeout과 사용법이 동일합니다. 

한번 실행하고 끝나는 setTimeout과 달리 계속 반복해서 실행됩니다. 결과를 보면 3초마다 'Mike'가 찍히게 됩니다.

중간에 중단하고 싶다면 clearInterval()을 실행하면 됩니다.

 

 

주의사항

한가지 주의사항이 있습니다. delayTime을 0으로 주어도 바로 실행되지 않습니다. 

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

console.log(1);

1이먼저 찍히고 2가 찍히게됩니다.