반응속도테스트

JS에서 시간을 체크하는 방법

1. new Date : new Date를 이용하여 시작 시간과 끝나는 시간의 차를 구하면 숫자값이 나오는데 이 때 나오는 값은 밀리세컨즈 단위이기 때문에 1000당 1초이므로 1000을 나눠주면 초 단위로 계산이 가능하다.

//시간을 체크하는 첫번째 방법.
//new Date()를 하는 순간 그 시각이 저장된다.
var 시작시간 = new Date();
스크린.addEventListener('click',function(){
    var 끝시간 = new Date();
    console.log((끝시간 - 시작시간) / 1000);

    if(스크린.classList.contains('waiting')) {//classList.contains로 현재 클래스 파악 가능
        스크린.classList.remove('waiting');
        스크린.classList.add('ready');
        스크린.textContent = '초록색이 되면 클릭하세요.';
    } else if (스크린.classList.contains('ready')) {
        스크린.classList.remove('ready');
        스크린.classList.add('now');
        스크린.textContent = '클릭하세요!';
    } else if(스크린.classList.contains('now')) {
        스크린.classList.remove('now');
        스크린.classList.add('waiting');
        스크린.textContent = '클릭해서 시작하세요.';
    }
});

2. console.time 이용

//시간을 체크하는 두번째 방법.
//console.time()이용
console.time('시간');

스크린.addEventListener('click',function(){
    console.timeEnd('시간');

    if(스크린.classList.contains('waiting')) {//classList.contains로 현재 클래스 파악 가능
        스크린.classList.remove('waiting');
        스크린.classList.add('ready');
        스크린.textContent = '초록색이 되면 클릭하세요.';
    } else if (스크린.classList.contains('ready')) {
        스크린.classList.remove('ready');
        스크린.classList.add('now');
        스크린.textContent = '클릭하세요!';
    } else if(스크린.classList.contains('now')) {
        스크린.classList.remove('now');
        스크린.classList.add('waiting');
        스크린.textContent = '클릭해서 시작하세요.';
    }
});

3. performance.now 이용

//시간을 체크하는 세번째 방법.
//performance.now();이용
var 시작시간 = performance.now();//newDate 보다 더 정밀한 시간을 측정할 때.

스크린.addEventListener('click',function(){
    끝시간 = performance.now();
    console.log((끝시간 - 시작시간) / 1000);

    if(스크린.classList.contains('waiting')) {//classList.contains로 현재 클래스 파악 가능
        스크린.classList.remove('waiting');
        스크린.classList.add('ready');
        스크린.textContent = '초록색이 되면 클릭하세요.';
    } else if (스크린.classList.contains('ready')) {
        스크린.classList.remove('ready');
        스크린.classList.add('now');
        스크린.textContent = '클릭하세요!';
    } else if(스크린.classList.contains('now')) {
        스크린.classList.remove('now');
        스크린.classList.add('waiting');
        스크린.textContent = '클릭해서 시작하세요.';
    }
});