자바스크립트 경과시간 체크하기

 

안녕하세요.
오늘은 자바스크립트에서 간단하게 경과시간 체크하는 방법을 포스팅하려고 합니다. 보통 성능 체크를 하거나 서비스의 로딩 체크 등 실제 걸리는 시간을 체크할 때 많이 사용합니다.
그럼 어떤 방식으로 시간 체크를 하는지 알아볼까요?!

---

1. Date.now()

 

<script>

function elapsedExample () { 
    // 시작 시간
    var startTime = Date.now();
    console.log('시작 시간 : ' + parseTime(startTime));

    setTimeout(() => {
        // 종료 시간
        var endTime = Date.now();
        console.log('종료 시간 : ' + parseTime(endTime));
        
        console.log('경과 시간 : ' + Math.floor((endTime - startTime) / 1000) + '초');
    }, 3000);
}

/*
 * 날짜 시간 포맷 Function
 */
function parseTime(date) {
    date = new Date(date);
    
    var h = date.getHours();
        h = h < 10 ? '0' + h : h;
    var m = date.getMinutes();
        m = m < 10 ? '0' + m : m;
    var s = date.getSeconds();
        s = s < 10 ? '0' + s : s;
        
    return [h, m, s].join(':');
}
</script>

먼저 위의 예제 소스 코드를 보게 되면 간단하게 예제 함수를 만들었습니다. 경과 시간을 체크하기 위해서 로직의 시작 전 시간과 종료된 종료 시간을 체크해야 합니다. 시간 체크를 위해서 Date.now() 함수를 사용하였습니다.

시작 시간 : var startTime = Date.now();
종료 시간 : var endTime = Date.now();

이렇게 로직의 시작과 종료 시점에서 시간을 체크하고, 체크가 끝난 후 마지막에 두 시간차를 구하여 경과 시간을 구하는 예제입니다.
로직의 경과 시간을 주기 위해서 setTimeout으로 3초를 지연시켜 줬습니다. 그렇게 하면 최종 경과 시간은 3초로 체크할 수가 있습니다.
추가로 시작, 종료 시간을 보기 좋게 parsing 처리 해주는 함수를 추가해 줬습니다. :) 

* 타임아웃 & 날짜포맷

https://sancode.tistory.com/14

---

실행 결과

 

반응형

---

2. new Date().getTime()

<script>

function elapsedExample () { 
    // 시작 시간
    var startTime = new Date().getTime();
    console.log('시작 시간 : ' + parseTime(startTime));

    setTimeout(() => {
        // 종료 시간
        var endTime = new Date().getTime();
        console.log('종료 시간 : ' + parseTime(endTime));
        
        console.log('경과 시간 : ' + Math.floor((endTime - startTime) / 1000) + '초');
    }, 3000);
}

/*
 * 날짜 시간 포맷 Function
 */
function parseTime(date) {
    date = new Date(date);
    
    var h = date.getHours();
        h = h < 10 ? '0' + h : h;
    var m = date.getMinutes();
        m = m < 10 ? '0' + m : m;
    var s = date.getSeconds();
        s = s < 10 ? '0' + s : s;
        
    return [h, m, s].join(':');
}
</script>

두 번째 예제는 첫 번째와 전체적인 로직은 동일하며, 시간 체크하는 함수만 new Date().getTime()으로 변경을 하였습니다. 실행 결과로 봤을땐 큰 차이는 없습니다~

Date.now() => new Date().getTime()

다만 두 코드의 차이가 있다면...
Date() : 날짜 정보를 문자열로 변경하여 반환
new Date() : 날짜 타입의 오브젝트로 반환
즉 new가 붙지 않으면 날짜 정보를 문자열 형태로 받게 되고, new가 붙으면 날짜 오브젝트로 받아 연월일시분초 컨트롤이 가능합니다.

하지만 이번 예제에선 두 예제 모두 time을 조회해 와서 두 케이스 모두 number 타입의 값을 반환하고 있습니다.
typeof( Date.now() )  => number type
typeof( new Date().getTime() )  => number type

두 케이스의 차이만 이해하신다면 상황에 맞춰 골라서 활용하시면 됩니다. :)

---

마무리

오늘은 이렇게 자바스크립트에서 경과 시간 체크하는 방법을 정리해 봤습니다. 간단하게 Date() 함수의 사용법만 알고 있다면 구현하는 데 큰 어려움은 없는 예제였습니다. 

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다!

 

 

 

---