[javaScript] 타이머 만들기

해당 로직은 만들다 폐기된 로직이다. 나름 열심히 만들었는데 폐기된 것이 아까워 티스토리에 공유하고자 한다.

 

var loginTimeElement = $("#loginTime");
var consultationTimeElement = $("#consultationTime");
var restTimeElement = $("#breakTime");
var state = $("#areaUserStatus");

// 시작 시간과 상담 시간을 가져옴
$.ajax({
    url: '/main/getAuthId',
    method: 'GET',
    success: function(response) {
        console.log(response + "footer")
        var loginTime = response.loginTm;
        var consultationTime = response.consultTm;
        var restTime = response.restTm;
        console.log(loginTime)
        console.log(consultationTime)
        console.log(restTime + "footer")

        // 로그인 시간을 시, 분, 초로 분리하여 정수로 변환
        var loginTimeParts = loginTime.split(":");
        var loginHours = parseInt(loginTimeParts[0]);
        var loginMinutes = parseInt(loginTimeParts[1]);
        var loginSeconds = parseInt(loginTimeParts[2]);

        // 상담 시간을 시, 분, 초로 분리하여 정수로 변환
        var consultationTimeParts = consultationTime.split(":");
        var consultationHours = parseInt(consultationTimeParts[0]);
        var consultationMinutes = parseInt(consultationTimeParts[1]);
        var consultationSeconds = parseInt(consultationTimeParts[2]);

        // 이석 시간을 시, 분, 초로 분리하여 정수로 변환
        var restTimeParts = restTime.split(":");
        var restHours = parseInt(restTimeParts[0]);
        var restMinutes = parseInt(restTimeParts[1]);
        var restSeconds = parseInt(restTimeParts[2]);

        var loginIntervalId;
        var consultationIntervalId;
        var restIntervalId;

        // 로그인 시간을 1초마다 증가시키고 표시하는 interval 설정
        loginIntervalId = setInterval(function() {
            loginSeconds++;
            if (loginSeconds >= 60) {
                loginSeconds = 0;
                loginMinutes++;
                if (loginMinutes >= 60) {
                    loginMinutes = 0;
                    loginHours++;
                    if (loginHours >= 24) {
                        loginHours = 0;
                    }
                }
            }
            var formattedLoginTime = formatTime(loginHours, loginMinutes, loginSeconds);
            loginTimeElement.text(formattedLoginTime);
        }, 1000);

        // 상담 시간을 1초마다 증가시키고 표시하는 interval 설정 (상담 시간이 READY일 때만)
        if (state.val() === 'READY') {
            consultationIntervalId = setInterval(function() {
                consultationSeconds++;
                if (consultationSeconds >= 60) {
                    consultationSeconds = 0;
                    consultationMinutes++;
                    if (consultationMinutes >= 60) {
                        consultationMinutes = 0;
                        consultationHours++;
                        if (consultationHours >= 24) {
                            consultationHours = 0;
                        }
                    }
                }

                var formattedConsultationTime = formatTime(consultationHours, consultationMinutes, consultationSeconds);
                consultationTimeElement.text(formattedConsultationTime);
            }, 1000);
        }   else {
            clearInterval(consultationIntervalId); // READY가 아닌 경우 상담 시간 interval 중지
            consultationIntervalId = setInterval(function() {
                var formattedConsultationTime = formatTime(consultationHours, consultationMinutes, consultationSeconds);
                consultationTimeElement.text(formattedConsultationTime);
            }, 1000);
        }

        // 상태 변경 시 상담 시간 interval 처리
        state.on('change', function() {
            if (state.val() === 'LOGIN' || state.val() === 'REST01' || state.val() === 'AFTERWORK') {
                clearInterval(consultationIntervalId); // REST01인 경우 상담 시간 interval 중지
            } else if (state.val() === 'READY') {
                consultationIntervalId = setInterval(function() {
                    consultationSeconds++;
                    if (consultationSeconds >= 60) {
                        consultationSeconds = 0;
                        consultationMinutes++;
                        if (consultationMinutes >= 60) {
                            consultationMinutes = 0;
                            consultationHours++;
                            if (consultationHours >= 24) {
                                consultationHours = 0;
                            }
                        }
                    }
                    var formattedConsultationTime = formatTime(consultationHours, consultationMinutes, consultationSeconds);
                    consultationTimeElement.text(formattedConsultationTime);
                }, 1000);
            }
        });

        // 이석 시간을 1초마다 증가시키고 표시하는 interval 설정 (상담 시간이 REST01이 아닐 때만)
        if(state.val() === 'REST01') {
            restIntervalId = setInterval(function() {
                restSeconds++;
                if (restSeconds >= 60) {
                    restSeconds = 0;
                    restMinutes++;
                    if (restMinutes >= 60) {
                        restMinutes = 0;
                        restHours++;
                        if (restHours >= 24) {
                            restHours = 0;
                        }
                    }
                }
                var formattedConsultationTime = formatTime(restHours, restMinutes, restSeconds);
                restTimeElement.text(formattedConsultationTime);
            }, 1000);
        } else {
            restIntervalId = setInterval(function() {
                var formattedConsultationTime = formatTime(restHours, restMinutes, restSeconds);
                restTimeElement.text(formattedConsultationTime);
            }, 1000);
        }

        // 이석 변경 시 상담 시간 interval 처리
        state.on('change', function() {
            if (state.val() === 'LOGIN' || state.val() === 'READY' || state.val() === 'AFTERWORK') {
                clearInterval(restIntervalId); // REST01인 경우 상담 시간 interval 중지
            } else if (state.val() === 'REST01') {
                restIntervalId = setInterval(function() {
                    restSeconds++;
                    if (restSeconds >= 60) {
                        restSeconds = 0;
                        restMinutes++;
                        if (restMinutes >= 60) {
                            restMinutes = 0;
                            restHours++;
                            if (restHours >= 24) {
                                restHours = 0;
                            }
                        }
                    }
                    var formattedConsultationTime = formatTime(restHours, restMinutes, restSeconds);
                    restTimeElement.text(formattedConsultationTime);
                }, 1000);
            }
        });

    }
});

// 시, 분, 초를 형식에 맞게 조합하여 반환하는 함수
function formatTime(hours, minutes, seconds) {
    return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
}