티스토리 뷰

[JQUERY]자바스크립트

jQuery 049. setInterval() ,clearInterval()을 활용한 타이머 만들기

가산동 2019. 5. 4. 13:56

이번에는 setInterval() ,clearInterval()을 활용해 타이머를 만들어 볼까 합니다. 먼저, setInterval()과 clearInterval()에 대한 사용법이라던지, 설명 및 예제는 아래 링크에 있습니다.

[[JQUERY]자바스크립트] - jQuery 048. 반복 타이머 setInterval() ,clearInterval() 

 

jQuery 048. 반복 타이머 setInterval() ,clearInterval()

setInterval() 은 설정된 시간마다 반복되는 함수입니다. 먼저 사용법을 보면, #code 01_01 setInterval(실행 함수 ,밀리초); setInterval(function(){ console.log("1초 마다 실행됩니다."); }, 1000); setInterv..

huidongstory.tistory.com

먼저 이번에 만들 예제의 실행 모습 입니다. 실제 작동하니, 버튼을 눌러보세요.

 

00:00.00

'start' 버튼을 누르면 실행하고, 'stop' 은 멈추고, 'reset' 되지 않으면 'start'는 기존 값을 이어서 진행하게 됩니다.

 

#code 01_01

    <body>
        <div class = 'ExOutDiv' style="width: 100%; text-align: center;">
            <div class = 'ExInDiv' style="width: 50%; display: inline-block; border: 5px solid #7dc1c7; padding-top: 10px; padding-bottom: 10px;">
                <div>
                    <span id="ex_min" style="font-size: 25px">00</span>:<span id="ex_sec" style="font-size: 25px">00</span>.<span id="ex_mSec" style="font-size: 25px">00</span>
                </div>
                <div>
                    <button id="ex_start" style="border: 3px solid #7dc1c7; padding: 5px;">start</button>
                    <button id="ex_stop" style="border: 3px solid #7dc1c7; padding: 5px;">stop</button>
                    <button id="ex_reset" style="border: 3px solid #7dc1c7; padding: 5px;">reset</button>
                </div>
            </div>
        </div>
    </body>

먼저 body 안의 html입니다. 태그의 id값 이외의 style 은 신경안쓰셔도됩니다. 

 

#code 01_02

    <script>
        
        //전역 변수
        var timer = null;
        var isStop = true;
        
        $(document).ready(function(){
            
            //시작 버튼
            $("#ex_start").click(function(){
                if(isStop){
                    isStop = false;
                    fnStopWatch($("#ex_min"),$("#ex_sec"),$("#ex_mSec") ,$("#ex_min").text(),$("#ex_sec").text(),$("#ex_mSec").text());
                }
            });
            
            //중지버튼
            $("#ex_stop").click(function(){
                isStop = true;
                clearInterval(timer);
            });
            
            //리셋버튼
            $("#ex_reset").click(function(){
                isStop = true;
                clearInterval(timer);
                $("#ex_min ,#ex_sec ,#ex_mSec").text("00");
            });
            
        });
        
        function fnStopWatch($m,$s,$ms ,m,s,ms){
            
            var min = m;
            var sec = s;
            var mSec = ms;
            
            var $m = $m;
            var $s = $s;
            var $ms = $ms;
            
            var tmep = "";
            
            timer = setInterval(function(){
                //밀리초증가
                mSec++;
                if(mSec < 10){
                    tmep = "0"+mSec;
                }else if(mSec > 99){
                    tmep = "00";
                    mSec = 0;
                    
                    //초증가
                    sec++;
                    if(sec < 10){
                        tmep = "0"+sec;
                    }else if(sec > 59){
                        tmep = "00";
                        sec = 0;
                        
                        //분증가
                        min++;
                        if(min < 10){
                            tmep = "0"+min;
                        }else if(min > 59){
                            tmep = "00";
                            min = 0;
                        }else{
                            tmep = min;
                        }
                        $m.text(tmep);
                        
                    }else{
                        tmep = sec;
                    }
                    $s.text(tmep);
                    
                }else{
                    tmep = mSec;
                }
                $ms.text(tmep);
            },10);
        }
    </script>

타이머의 밀리초, 초, 분까지 컨트롤을 해야되는 스크립트라서 조금 복잡합니다. 부분별로 설명을 붙이자면,

 

 

#code 02_01

function fnStopWatch($m,$s,$ms ,m,s,ms){

fnStopWathch()는, 매개변수로 분,초,밀리초를 찍어줄 엘리먼트(위 예제에선 span태그 #ex_min, #ex_sec, #ex_mSec 이 사용됨) 와 분,초,밀리초를 받습니다.

 

#code 02_02

function fnStopWatch($m,$s,$ms ,m,s,ms){

  var min = m; 
  var sec = s;
  var mSec = ms;

  var $m = $m;
  var $s = $s;
  var $ms = $ms;

  var tmep = "";

받은 매개 변수를 각각 변수에 담아줍니다. var temp는 텍스트를 잠깐 담아두는 용도로 사용될 겁니다.

 

#code 02_03

timer = setInterval(function(){
                //밀리초증가
                mSec++;
                if(mSec < 10){
                    tmep = "0"+mSec;
                }else if(mSec > 99){
                    tmep = "00";
                    mSec = 0;
                    
                    //초증가
                    sec++;
                    if(sec < 10){
                        tmep = "0"+sec;
                    }else if(sec > 59){
                        tmep = "00";
                        sec = 0;
                        
                        //분증가
                        min++;
                        if(min < 10){
                            tmep = "0"+min;
                        }else if(min > 59){
                            tmep = "00";
                            min = 0;
                        }else{
                            tmep = min;
                        }
                        $m.text(tmep);
                        
                    }else{
                        tmep = sec;
                    }
                    $s.text(tmep);
                    
                }else{
                    tmep = mSec;
                }
                $ms.text(tmep);
            },10);

타이머는 10밀리초 마다 실행됩니다.

1) 10밀리초 마다 '밀리초 변수'를 증가시키고, '밀리초 변수'에 담겨있는 값을 span태그에 .text() 를 활용해 넣어줍니다.

2) '밀리초 변수'가 100이 될때 '초' 변수를 증가시켜주고, '초' 변수의 값 span 태그에 .text() 를 활용해 넣어줍니다.

3) '초' 변수가 60이 될때 '분' 변수를 증가시켜주고 '분' 변수의 값을 span 태그에 .text() 를 활용해 넣어줍니다.

조금더 자세하게 설명하자면,

 

#code 02_04

//밀리초증가
mSec++;
if(mSec < 10){
	tmep = "0"+mSec;
}else if(mSec > 99){
	tmep = "00";
	mSec = 0;

//초증가

}else{
	tmep = mSec;
}

$ms.text(tmep);

timer가 반복 될때 마다 밀리초를 증가시키고, 밀리초가 특정조건인 99 보다 커질때, 초를 증가시킵니다. 초가 증가될 때도 마찬가지로 특정 조건인 59보다 커질때, 분을 증가시키는 구조입니다.

 

#code 02_05

            //시작 버튼
            $("#ex_start").click(function(){
                if(isStop){
                    isStop = false;
                    fnStopWatch($("#ex_min"),$("#ex_sec"),$("#ex_mSec") ,$("#ex_min").text(),$("#ex_sec").text(),$("#ex_mSec").text());
                }
            });

'시작 버튼'이 눌리게 되면, 타이머가 이미 시작되고 있는지를 확인한후 타이머를 실행합니다.

 

#code 02_06

            //중지버튼
            $("#ex_stop").click(function(){
                isStop = true;
                clearInterval(timer);
            });

'중지 버튼'이 눌리면 clearInterval()를 통해 타이머를 중지시켜주고, 전역변수로 설정해둔 isStop을 true로 변경해줍니다.

 

#code 02_07

            //리셋버튼
            $("#ex_reset").click(function(){
                isStop = true;
                clearInterval(timer);
                $("#ex_min ,#ex_sec ,#ex_mSec").text("00");
            });

'리셋 버튼'이 눌리면 clearInterval()를 통해 타이머를 중지시켜주고, 전역변수로 설정해둔 isStop을 true로 변경해준뒤, 기존의 값을을 모두 "00"으로 바꿔줍니다.

 

저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 050. 일회성 타이머 setTimeout();  (1) 2019.05.04
jQuery 048. 반복 타이머 setInterval() ,clearInterval()  (0) 2019.05.04
jQuery 047. callback 함수 (콜백 함수)  (0) 2019.04.30
jQuery 046. 리터럴 방식 & 객체 방식 & 익명함수  (0) 2019.04.29
jQuery 045. function() 함수  (0) 2019.04.24
댓글