Javascript-11 (setTimeout / setInterval)

아마 내가 익힌 베이직 중에 가장 쉽게 익히고, 또 많이 사용 되는 것 중 하나인 것 같다!

setTimeout

: 일정 시간이 지난 후에 함수를 실행 시키는 것

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

setTimeout(fn, 3000); // (일정시간이 지난 후 실행하는 함수, 시간)

// or ( 아래처럼 출력해도 같은 말이다!)

setTimeout(function(){
  console.log('출력')
}, 3000); // 3초 후에 3 실행

// or

setTimeout(() => {
  console.log('출력')
}, 3000); // 3초 후에 3 실행

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

setTimeout(showName, 3000, 'Mike'); // 3초 후에 Mike 출력

• setTimeout(함수, 시간, 인수) 순서로 작성
• 인수가 필요하다면 시간 뒤에 작성한다

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

setTimeout(showName, 3000, "Mike");

clearTimeout(time); // 아무일도 일어나지 않는다

• setTimeout은 time을 반환하는데 이를 clearTimeout 하면 스케쥴링을 취소 할 수 있다
• 3초가 지나기 전에 clearTimeout이 실행되기 때문에 아무 일도 일어나지 않는다

setInterval

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

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

const timeId = setInterval(showName, 2000, 'Mike'); // 2초마다 계속 Mike 실행

// clearInterval(timeId );

• setTimeout과 사용 방법은 같지만 계속해서 반복하는 것
• 중단하려면? ⇒ clearInterval( ) 실행

setInterval의 주의사항

setTimeout(function () {
  console.log(2);
}, 0); // 0초 라고 해서 가장 먼저 곧바로 실행될까?? no!

console.log(1);

• console.log(1)의 결과 값이 먼저 찍히고, 이 후 setTimeout의 console.log(2)가 찍힌다

⇒ 현재 실행 중인 script가 종료 된 이 후 setTimeout이 실행 되기 때문!!

• 또한 브라우저는 기본적으로 약 4ms~ 정도의 대기 시간이 있으므로 0이라고 해도 최소 4ms 혹은 그 이상이 걸릴 수도 있다

예제)

let num = 0;

function showTime() {
  console.log(`접속한지 ${num++}초가 지났습니다`);
  if (num > 120) {
    clearInterval(tId);
  }
}

const tId = setInterval(showTime, 1000);