티스토리 뷰

development/html javascript CSS

[JavaScript] setInterval() 주기마다 반복 작업 시행 method

Happyoon ~ 2021. 10. 15. 00:44
728x90
반응형

setInterval() 메서드는 일정시간을 주기로 반복 작업을 하기 위한 메서드이다.

setTimeout()과 다른점은, setTimeout은 일정 시간이 지났을 때 한번만 호출하지만, setInterval은 일정 시간마다 해당 함수를 반복 호출한다는 점이다.

 

setInverval의 사용법은 다음과 같다.

setInverval(function(){},delay) //(호출할 함수, 지연시간)

 

예제를 살펴보자.

다음 예제는 setInterval()을 활용하여 버튼  클릭 시 1초마다 숫자가 증가하도록 구현한 예제이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step08_etc5.html</title>
</head>
<body>
    <h1>일정시간 주기로 반복 작업하기</h1>
    <button id ="countBtn">숫자 세기</button>
    <p id = "count">0</p>
    <script>
        //setTimeout은 일정시간 지나면 한번만 호출,
        //setInterval은 일정시간마다 해당 함수 반복 호출
        
        setInterval(function(){
            console.log("hello");
        },1000);
        
        //'숫자 세기' 버튼 클릭 시 1초마다 숫자가 증가하도록 구현
        let cnt = Number(document.querySelector("#count").innerText);
        
        document.querySelector("#countBtn").addEventListener("click",function(){
            setInterval(function(){
                cnt++;
                document.querySelector("#count").innerText = cnt;
            },1000);
        });
    </script>
    
</body>
</html>

 

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] this 복습하기 / EventListener에서의 this  (0) 2021.10.19
[JavaScript] Math 객체 활용하기 / ceil(), round(), floor(), random()  (0) 2021.10.19
[JavaScript] setTimeout() 시간 지연시켜 작업 수행 method  (0) 2021.10.15
[JavaScript] 에서 문자열의 생성법과 가공법 / backtick, ${변수명}  (0) 2021.10.15
[JavaScript] append()  (0) 2021.10.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함