Приостановка секундомера не останавливает время

Question

Надеюсь, я могу пояснить здесь.

Я использую следующий код для запуска моего секундомера:

function timecounter(starttime) 
    { 
    currentdate = new Date(); 
    details = document.getElementById('details'); 
    stopwatch = document.getElementById('stopwatch'); 

    var timediff = currentdate.getTime() - starttime; 
    if(runningstate == 0) 
     { 
     timediff = timediff + stoptime 
     } 
    if(runningstate == 1) 
     { 
     stopwatch.value = formattedtime(timediff); 
     refresh = setTimeout('timecounter(' + starttime + ');',10); 
     } 
    else 
     { 
     window.clearTimeout(refresh); 
     stoptime = timediff; 
     } 
    } 

function startandstop() 
    { 
    var startandstop = document.getElementById('startandstopbutton'); 
    if(runningstate==0) 
{ 
startandstop.value = 'Pause'; 
runningstate = 1; 
timecounter(starttime); 
} 
else 
    { 
    startandstop.value = 'Start'; 
    runningstate = 0; 
    lapdate = ''; 
    } 
} 

Но когда я выбираю кнопку, чтобы приостановить время, время останавливается, но когда я нажимаю начать снова, он переходит к тому времени, в настоящее время это так, как будто я не приостанавливал время.

Я пытался выяснить, что с ним происходит, и не добился успеха.

Я считаю, что это может иметь какое-то отношение к функции timecounter(), но оттуда я не уверен.

Любая помощь была бы принята с благодарностью!

Спасибо, Brandon

Answer 1

Я думаю, вы должны использовать .performance.now(), если вы хотите что-то близкое к точным в терминах мс.

Думал, что у вас была интересная проблема, поэтому я придумал решение для удовольствия. Надеюсь, поможет. :) (ОБНОВЛЕНИЕ НИЖЕ КОДА)

http://jsfiddle.net/colbycallahan/CjDz7/1/ (очистить его немного для отображения и округление бит)

Works и требует JQuery:

HTML:

<div id="console"></div> 
<input type="button" id="btn" value="start time"> 
<input type="button" id="btn2" value="stop time"> 

js:

var timerRunning = false; 
var startTime; 
var totalTime; 
$('#console').data('totalTime', 0); 

function startTimer(){ 
    totalTime = $('#console').data('totalTime'); 
    startTime = window.performance.now(); 
    timerRunning = true; 

    function timerLoop(){ 
     window.setTimeout(function(){ 
      if(timerRunning){ 
       $('#console').text(window.performance.now() - startTime + totalTime); 
       timerLoop(); 
      } 
     }, 50); 
    } 

    timerLoop();  
} 

$('#btn').on('click', function(){ 
    startTimer(); 
}); 

$('#btn2').on('click', function(){ 
    totalTime = window.performance.now() - startTime + totalTime; 
    $('#console').data('totalTime', totalTime); 
    timerRunning = false; 
}); 

Я взял ваш код, и первое, что я сделал, это исправить то, что может привести к ошибкам с точки зрения синтаксиса относительно фигурных скобок на отдельных строках из инструкции if, отсутствующей точки с запятой в выражении if, когда текущее состояние равно 0, одна точка с запятой, некорректно помещенная в вызов timecounter(). Вы попытались вызвать функцию, сделав ее строкой, но строки никогда не вызывают функции. Время начала не определено, прежде чем передавать его в качестве аргумента timecounter(). Строка settimeout() должна быть настроена вне оператора условия для ее вызова. Вы без необходимости вызываете else, если запущенное состояние не равно 1. lapdate не определен иначе, чем для его пустой строки. Кроме того, обновление не определено, если текущее состояние равно 1, но вызывается только тогда, когда обновление не равно 1. Наконец, вы не указали весь код, необходимый для того, чтобы узнать, были ли сделаны дополнительные ошибки, и нет достаточного кода, чтобы узнать, что я переписал исправит вашу проблему, поэтому я написал новый код (для его включения на вашей странице требуется библиотека jquery). Я не совсем понимаю логику вашего кода. Еще одна вещь: вам нужно будет восстановить сохраненное значение прошедшего времени после того, как пользователь запустил таймер, нажал паузу, а затем возобновил таймер. В качестве благодарности вы должны пойти на JSLint.com или подобный и никогда не запускать свой код в браузере, пока он не пройдет тест на линт. Я только пересказываю ваш код внизу и не ожидаю, что он сработает. Я переделал свой таймер в javascript с ванилью без необходимости jquery.Именно здесь:

Works и не требует JQuery:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

    <div id="console"></div> 
    <input type="button" id="btn" value="start time" onclick="startTimer();"> 
    <input type="button" id="btn2" value="stop time" onclick="stopTimer();"> 
    <input type="hidden" id="storedTime" value="0"> 

<script> 
    var timerRunning = false; 
    var startTime; 
    var totalTime; 
    var storedTimeInp = document.getElementById('storedTime'); 
    var console = document.getElementById('console'); 

    function startTimer(){ 
     totalTime = Number(storedTimeInp.value, 10); 
     startTime = window.performance.now(); 
     timerRunning = true; 

     function timerLoop(){ 
      window.setTimeout(function(){ 
       if(timerRunning){ 
        console.innerHTML = (window.performance.now() - startTime + totalTime); 
        timerLoop(); 
       } 
      }, 50); 
     } 

     timerLoop();  
    }  

    function stopTimer(){ 
     totalTime = window.performance.now() - startTime + totalTime; 
     storedTimeInp.value = totalTime; 
     timerRunning = false; 
    } 


</script> 
</body> 
</html> 

Ваш код переписан Любопытное (пунктирная):

var runningstate = 0; 

function timecounter(starttime){ 
    currentdate = new Date(); 
    details = document.getElementById('details'); 
    stopwatch = document.getElementById('stopwatch'); 

    var timediff = currentdate.getTime() - starttime; 

    setTimeout(
    if(runningstate == 0){ 
     timediff = timediff + stoptime; 
    }else{ 
     stopwatch.value = formattedtime(timediff); 
     timecounter(starttime); 
     stoptime = timediff; 
    } 
    ,10); 
} 

function startandstop(){ 
    var startandstop = document.getElementById('startandstopbutton'); 
    if(runningstate==0){ 
    startandstop.value = 'Pause'; 
    runningstate = 1; 
    starttime = new Date(); 
    starttime = starttime.getTime(); 
    timecounter(starttime); 
    }else{ 
    startandstop.value = 'Start'; 
    runningstate = 0; 
    lapdate = ''; 
    } 
}