[JS](타이머함수) setTimeout() , setInterval()

 

setTimeout()

setTimeout() 함수는 어떤 코드를 일정 시간 동안 기다리거나 지정한 후 실행 하는 함수이다.

setTimeout(() => console.log("2초 후 실행"), 2000);

//2초 후 실행

ex)

함수 안에 setTimeout() 함수를 넣고 A, B가 무한으로 출력 될 수 있게  만들 수 있다.

function funcA() {
  setTimeout(() => {
    console.log("A");
    funcB();
  }, 1000)
}
funcA();
function funcB() {
  setTimeout(() => {
    console.log("B");
    funcA();
  }, 1000)
}

 

 

ex2)

두개의 수를 인자로 받아 더한 값을 출력해주는 add()라는 함수에 인자로 3 과 4를 넘겨 2초를 기다린 후에 호출 할 수있다.

function add(x, y) {
  console.log(x + y);
}
setTimeout(add, 2000, 3, 4);

// 7(2초후)

※ clearTimeout()

함수를 호출하면 기다렸다가 실행될 코드를 취소 할 수 있습니다.

const timeout = setTimeout(() => {
   console.log("기다렸다가 실행")
}, 1000);

clearTimeout(timeout);
//아무 것도 출력 안됨

 

setInterval()

웹페이지의 특정 부분을 주기적으로 업데이트해줘여 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데 이럴때는 자바스크립트의 setInterval() 함수를 사용할 수 있다.

 

setInterval(() => console.log(new Date()), 2000);

// (오늘 날짜와 시간 2초 단위로 끝없이 출력된다.)

 

ex)

숫자를 변수에 저장해놓고 2초 마다 1씩 증가시킬 수 있다.

let count = 0;
setInterval(() => console.log(++count), 2000);
// 1
// 2
// ...
// 10

 

※ clearInterval()

함수를 호출하면 코드가 주기적으로 실행되는것을 중단시킬 수 있다.