[JS] setInteval() 함수 (타이머 만들기)

setInterva() 함수란?

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 사용.
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용.

첫번째 인자: 실행할 코드를 담고 있는 함수
두번째 인자: 반복 주기를 밀리초(ms) 단위로 받음 (1000=1초)

ex)

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

새로운 날짜를 2초마다 업데이트 받는 코드

간단한 타이머 만들기

let sec=10;
function startTimer(){
    function clock(){
        if(sec>0){
            timer.innerText="0:"+sec;
            sec = sec-1;
        }else{
            timer.innerText="0:0";
            clearInterval(interval)
        }}

    var interval = setInterval(clock,1000)
}

10초 타이머이다

1. 반복할 함수 먼저 만든다. function clock(),
   이 함수는 sec>0이라면, innerText로 화면에 보여주고,
   sec -1 값을 sec에 넣는다.
   sec=0이 됐을 때, 0:0을 화면에 보여준다.
2. interval이란 변수에 setInterval(clock,1000)를 넣는다.
   변수에 넣어야지, clearInterval 함수를 쓰기 용이하다.
3. sec=0이 됐을 때, clearInterval(interval)함수를 넣어
   타이머를 정지시킨다.