[jQuery] 간단한 타이머 구현하기

제이쿼리로 타이머 기능을 구현해보겠습니다.
차근차근 살펴보면 쉬운 코드임에도 불구하고 꽤 해맸네요😅

바로 코드 보겠습니다!

        $(document).ready(function(){
            timer();
        });

        function timer() {
            var time = 271; // 4분 31초
            var min = 4;
            var sec1 = 3;
            var sec2 = 1;

            var all_timer = setInterval(function(){
                console.log(time);

                time --;

                if (time == 0) {
                    // 시간이 끝나면 타이머 종료
                    clearInterval(all_timer);
                    clearInterval(sec2_timer);
                }
            }, 1000);

            if (sec2 < 10) {
              // 1초대를 카운트다운 하는 타이머 동작
                var sec2_timer = setInterval(function(){
                    console.log(min + "분" + sec1 + sec2 + "초");
                    
                    sec2 --;

                     if (sec2 < 0) {
                        sec2 = 9;
                        sec1 --;

                        if (sec1 < 0) {
                            sec1 = 5;
                            min --;
                        }
                     }
                }, 1000);
            }
        }

하나하나 설명을 해볼게요~

var time = 271; // 4분 31초
var min = 4;
var sec1 = 3;
var sec2 = 1;

구현하려고 했던 화면이 분/10초/1초가 분리되어 있어서 백엔드에서 파라미터 값을 따로 받아야 했습니다.
지금은 간단한 구현을 위한거니 변수를 선언하고 테스트용으로 4분 31초값을 상수로 대입해줍니다.

var all_timer = setInterval(function(){
 	console.log(time);

	time --;

	if (time == 0) {
		// 시간이 끝나면 타이머 종료
        clearInterval(all_timer);
        clearInterval(sec2_timer);
        }
	}, 1000);

4분 31초를 sec으로 변환한 값을 1초씩 내려줍니다.
화면상에선 보이지 않고 타이머를 끝낼 시점을 알기 위해 돌아가는 함수입니다!

if (sec2 < 10) {
	// 1초대를 카운트다운 하는 타이머 동작
	var sec2_timer = setInterval(function(){
    	console.log(min + "분" + sec1 + sec2 + "초");
        
        sec2 --;
        
        if (sec2 < 0) {
        	sec2 = 9;
            sec1 --;
            
            if (sec1 < 0) {
            	sec1 = 5;
                min --;
            }
        }
   }, 1000);
}

sec2 값이 0보다 작아지는 시점에 sec1의 값이 한 번 감소하고, sec1이 0보다 작아지는 시점에 min이 한 번 감소하는 함수입니다. 1초대 sec2값만 1초에 한번씩 감소해주면 결국 최종적으로 원하는 시간만큼 줄어드는 타이머 구현이 가능합니다🤩

구현된 코드 ▼

제이쿼리로 간단하게 타이머를 구현해보았습니다~
감사합니다(--)