📙ES6 문법공부

---

📌setTimeout

✨setTimeout이란?

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

✨setTimeout 예시

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

setTimeout(fn, 3000); // 3초 후에 3이 출력된다.

setTimeout() 자바스크립트 비동기 함수는 첫 번째 인자로 일정시간이 지난 뒤 실행할 함수를 받는다. 두 번째는 시간이다. 3000은 3초를 의미한다.

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

setTimeout(function() {
  console.log(3);
}, 3000); // 3초 후에 3이 출력된다.

첫 번째 인자에 함수를 전달하지 않고, 직접 코드를 작성해도 동일하게 동작한다.

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

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

일정 시간 뒤에 실행할 함수가 인수가 필요하다면 setTimeout() 함수의 세 번째 인자에 인자를 적어준다.

💡clearTimeout(tId)

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

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

clearTimeout(tId); // 스케쥴링을 취소했기에, 아무 일도 일어나지 않는다.

setTimeout() 함수는 timeId를 반환하는데 이를 이용해서 예정된 작업을 취소할 수 있다. 즉, 스케쥴링을 취소할 수 있다.

---

📌setInterval

✨setInterval이란?

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

✨setInterval 예시

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

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

위 코드는 3초 마다 'Mike'를 출력한다.

💡clearInterval(tId)

중간에 중단하려면 clearInterval(tId) 함수를 이용한다.

let num = 0;

function showTime() {
  console.log(`안녕하세요. 접속하신지 ${num++}초가 지났습니다.`);
  if (num > 5) {
    clearInterval(tId);
  }
}

const tId = setInterval(showTime, 1000);
/*
안녕하세요. 접속하신지 0초가 지났습니다.
안녕하세요. 접속하신지 1초가 지났습니다.
안녕하세요. 접속하신지 2초가 지났습니다.
안녕하세요. 접속하신지 3초가 지났습니다.
안녕하세요. 접속하신지 4초가 지났습니다.
안녕하세요. 접속하신지 5초가 지났습니다.

📌delay time을 0으로 준다면?

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

console.log(1); // 1이 먼저 출력된 후에, 2가 출력된다.

delay time을 0으로 줘도 실제론 함수가 바로 실행되지 않는다. 브라우저는 CPU를 효율적으로 사용하기 위해서 기본적으로 최소 4ms의 대기 시간이 있다. setTimeout()과 setInterval()는 브라우저에서 제공하는 Web API를 통해 동작한다. (자바스크립트 엔진이 Web API에 비동기 작업을 처리하도록 요청한다.) 그렇지만, Web API 환경과의 통신 속도는 이보다 훨씬 빠르기에 지연시간에 큰 영향을 미치지 않는다.