[Javascript] setTimeout / setInterval

setTimeout

✔️ 일정 시간이 지난 후 함수를 실행

// setTimeout 기본 사용법1
function fn(){
  console.log(3);
}

setTimeout(fn, 3000); //3초후 fn 실행


// setTimeout 기본 사용법2
setTimeout(function(){
  console.log(3);
},3000);


//매개변수가 들어갔을 때
function showName(name){
  console.log(name);
}

setTimeout(showName, 3000, 'Kay'); //3초후 Kay를 인수로 넣은 showName 함수 실행

 

clearInterval() 으로 실행을 종료할 수 있음.

 

setInterval

✔️ 일정 시간 간격으로 함수를 반복 

 

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

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

 

연습예제

접속한지 초단위로 보여주고 5초가 지나면 멈추기

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

let tId = setInterval(showTime, 1000);

 

일초 간격으로 숫자 출력하기

function printNumbers(from, to){
  let current = from;
  let timerId = setInterval(function(){
  	console.log(current);
    if(current = to){
      clearInterval(timerId);
    }
    current++;
  },1000);
}

printNumbers(5, 10);

 

Reference

• https://www.youtube.com/watch?v=nwk_aNbFEEc&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=12
• https://ko.javascript.info/settimeout-setinterval