중급 기본 정리 (with 앙마코딩) setTimeout / setInterval

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)
문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

setTimout() : delay 후 함수 실행

setTimeout는 정해논 시간 뒤에 함수를 실행 시킬 수 있다. 또한 함수의 인수를 받을 수도 있다.(필요하다면 시간 뒤에 작성하고, 없다면 안적어도 된다)

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

setTimeout(consName, 3000, 'Btae');

이 예제는 함수 consName('Btae')을 3초 뒤에 실행한다. 여기서 3000의 단위는 ms(밀리세컨)으로 1000ms = 1초이다.

setTimeout() 멈추는 법

js를 작성하다보면 setTimeout()을 멈춰야 하는 경우가 있는데 이때는 clearTimeout()을 사용한다.

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

const timeId = setTimeout(consName, 3000, 'Btae');

clearTimeout(timeId);

위 예제는 setTimeout으로 함수를 예약했지만 clearTimeout을 만나 실행되지 않는다.
setTimeout은 timeId값을 반환하고, 그 값을 인수로 clearTimeout을 실행하면 종료하게 된다.

setInterval() : 일정 간격으로 반복 실행

setInterval은 setTimeout과 사용 방법이 동일하다. 다만 한 번으로 끝나지 않고 계속 반복 수행한다는 점이 다르다.

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

const timeId = setinterval(showName,3000,'Btae');

이 코드는 3초마다 계속해서 'Btae'를 반환한다. 만약 clearInterval(timeId)를 만나게 되면 종료한다.

delay = 0 ?

setTimeout(() = > {
    console.log(2);
},0);
console.log(3);

위 코드를 보면 당연히 먼저 실행된 setTimeout의 딜레이가 0임으로 2가 먼저 반환되고 3이 반환될 것 같지만, 사실은 그렇지 않다.
첫 번째 이유는 js 코드를 다 읽고나서 실행하기 때문에 반환 순서는 3이 먼저이고, 딜레이가 0이라 하지만, 인터넷은 4ms 이상의 시간이 소요되기 때문에 바로 실행된다고 생각할 수는 없기 때문이다.