[JS] setTimeout, setInterval, clearTimeout

 

 

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

function fn() {
  console.log("hi");
}
setTimeout(fn, 3000);

// 위와 같음
setTimeout(function () {
  console.log("hi");
}, 3000);

 

❗️ 인수가 필요하다면? : 세 번째에 값을 넣는다.

function showName(name) {
  console.log(name); // "aoto"
}

setTimeout(showName, 3000, "aoto");

 

clearTimeout : 예정된 타임아웃을 없앤다.

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

const tId = setTimeout(showName, 3000, "aoto"); // 실행되지 않음
clearTimeout(tId);

 

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

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

const tId = setInterval(showName, 3000, "aoto"); // 3초마다 "aoto"가 찍힌다.
// 멈추고싶다면, clearTimeout 사용

 

❗️ 주의, delay 값을 0으로 줘도 바로 실행되진 않는다.

현재 실행중인 스크립트가 종료된 후,

스케쥴링 함수가 실행되기 때문.

 

또한 브라우저는 기본적으로 4ms 정도의 대기 시간이 있다.

그러니 0이라 적어도 4ms 혹은 그 이상의 대기 시간이 걸린다.

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

console.log("bye"); // bye가 먼저 찍힌다.

 

응용!

let num = 0;

function showTime() {
  console.log(`접속하신지 ${num++}초가 지났습니다.`);
  if (num > 5) {
    clearInterval(tId); // 5초가 지나면 종료되도록
  }
}

const tId = setInterval(showTime, 1000); // 1초마다 실행
// "접속하신지 0초가 지났습니다."
// "접속하신지 1초가 지났습니다."
// "접속하신지 2초가 지났습니다."
// "접속하신지 3초가 지났습니다."
// "접속하신지 4초가 지났습니다."
// "접속하신지 5초가 지났습니다."

 

 

 

🔗 https://youtu.be/KfuyXQLFNW4?si=wAJ5A1iEwQVnb72I