계발하는 개발자

[JS] 자바스크립트 타이머 함수 | setInterval, setTimeout 본문

📌 Language/Javascript

[JS] 자바스크립트 타이머 함수 | setInterval, setTimeout

dev_genie 2023. 2. 8. 22:08

만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후 호출되도록 예약하려면

타이머 함수를 이용할 수도 있습니다. 이를 호출 스케줄링이라 부릅니다. 

지정된 시간마다 함수를 반복 실행할 수 있는 setInterval, setTimeout 타이머 함수에 대해 알아보겠습니다.

 

자바스크립트는 타이머를 생성할 수 있는 타이머함수 setInterval, setTimeout 와

타이머를 제거할 수 있는 clearInterval, clearTimeout 함수를 제공합니다.

 

setInterval 함수란?

  'interval' 이라는 단어에서 알 수 있듯이, 일정한 시간 간격으로 반복 호출되는 함수입니다.

♪ 형식 : setInterval (반복 실행할 함수, ms_단위 시간) 

♪ 내가 정한 시간 간격마다 함수가 연속 호출되는 특징을 갖고 있습니다.

<script>
    let seconds = 1;

    setInterval(() => { // 정한 시간간격마다 연속 호출
    console.log(seconds++)}, 1000);
</script>

setInterval 함수는 뒤에 나올 setTimeout 함수와 마찬가지로

밀리초(ms : 1/1000) 단위의 시간값을 갖습니다. 

1초면 1000 , 2초면 2000, 0.5초면 500 과 같이 적어주면 됩니다.

 

clearInterval 타이머 제거 함수를 이용하면

일정 시간 이상으로 넘어갈 경우 타이머가 중지되도록 설정할 수 있습니다.

let seconds = 1;
let timer;
timer = setInterval(() => { // 정한 시간간격마다 연속 호출
    console.log(seconds++)
    if(seconds>5){
        clearInterval(timer)
    }
}, 1000);

timer 라는 임의의 변수를 하나 더 생성해서 setInterval 함수를 할당해줬고,

5초 이상으로 넘어갈 경우(seconds>5) 함수가 중지되도록(clearInterval(timer)) 했습니다.

 

단순 콘솔창에 표시되는 출력값 외에도

0인 상태의 div 요소의 내용을 1씩 증가시켜 표현해줄 수도 있습니다.

<script>
let seconds = 1;
let timer;

timer = setInterval(() => { // 정한 시간간격마다 연속 호출
    let txt = document.querySelector("h2");
    txt.textContent = seconds++;
    if(seconds>5){
        clearInterval(timer)
    }
}, 1000);

</script>
</head>
<body>
    <h2>0</h2>
</body>

 

1초 간격으로 타이머가 실행되며 초수가 5초를 넘어가자 자동으로 중지됩니다.

여기서는 div요소에 textContent 속성을 줘서 값을 1초 간격으로 증가시켰는데요,

innerText 속성을 줘도 똑같이 작동하는 모습을 보이기는 합니다.

(textContent vs innerText 속성의 차이는 다음 포스팅에서 더 상세히 다루도록 하겠습니다.)

 

 

setTimeout 함수란?

  'timeout' 이라는 단어에서 알 수 있듯이, 일정 시간이 지나면 자동으로 종료되는 함수입니다.

♪ 형식 : setTimeout (반복 실행할 함수, ms_단위 시간) 

♪ 내가 정한 시간 동안 단 한 번만 호출됩니다. 

<script>
    let seconds = 1;
    let timer;

    timer = setTimeout(()=> {
        console.log(seconds++);
    },1000);
</script>

형식은 위 setInterval 함수와 동일하여 예제 내 실행코드도 단어 하나만 변경해주면 됩니다.

앞선 setInterval 함수와 다르게 지정한 시간 동안 단 한 번만 실행되는 것을 볼 수 있습니다.

 

참고로 타이머함수를 상수 const 키워드를 이용한 변수에 할당하면 에러가 날 수 있으니 주의바랍니다.

(const는 값이 일정한 상수인데 값을 연속해서 변경해주도록 ++ 증감연산자 등을 이용해 명령하면

위와 같은 에러가 발생할 수 있습니다.)

 

*이해에 도움이 됐던 강의 & 자료 출처:

https://youtu.be/BAn8y2GzQHA - 유노코딩 / setInterval & clearInterval

모던자바스크립트 Deep Dive / 이웅모 저

 

LIST

'📌 Language > Javascript' 카테고리의 다른 글

[JS] contains() 메소드 알아보기 | (feat. includes() 메소드 비교)  (4) 2023.02.11
[JS] length 프로퍼티 | 함수객체.length vs arguments.length  (0) 2023.02.08
[JS] 이벤트 처리(event handling) | addEventListener, onEvent  (0) 2023.02.06
[JS] return문의 이해 (console.log와 return 명령의 차이)  (2) 2023.02.05
[JS] 자바스크립트 | 객체(object type)와 객체지향 프로그래밍  (0) 2023.01.25
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!