Javascript setTimeout setInterval 함수

자바스크립트를 사용하다보면 이 2가지 코드를 자주 사용하게 된다. setInterval, setTimeout. *브라우저 환경에서 쓴다면 window.setInterval 처럼 앞에 window 객체의 메서드로 사용한다.

setInterval()

특정 시간 마다 특정 코드를 실행하고 싶을 때 사용한다. 첫번째 인수로 실행할 함수, 두번째 인수로 반복할 시간을 적는다.

window.setInterval(
  () => {
    console.log("10s!");
  },
  10 * 1000
); 
//10초 마다 
//console.log("10s!") 를 반복한다.

clearInterval

setInterval 함수는 setInterval id를 리턴한다. 이 id로 반복실행을 멈출 수 있다.

const IntervalId = window.setInterval(
  () => {
    console.log("10s!");
  },
  10 * 1000
); 

window.clearInterval(intervalId);

setTimeout

setTimeout는 특정 시간 후에 코드를 1회만 실행한다. setInterval 함수와 구조는 똑같다.

window.setInterval(
  () => {
    console.log("After 10s!");
  },
  10 * 1000
); 
//10초후에
//console.log("After 10s!")를 1회 실행한다.

clearTimeout

setTimeout 함수는 setTimeout id를 리턴한다. 이 id로 예정된 실행을 취소할 수 있다.

const timeoutId = window.setInterval(
  () => {
    console.log("After 10s!");
  },
  10 * 1000
); 

window.clearTimeout(timeoutId);