Как продолжить таймер после использования clearInterval();

Question

У меня есть следующие функции:

$(document).ready(function() { 
    $('#p').click(function() { 
     $('#s1').hide(); 
     gameStart(); <-starts timer 
     $('#s2').show(); 
    }); 

    $('.b4').click(function() { 
     clearInterval(tI); <-stops the time 
    }); 
    $('#r').click(function() { 
     tI = setInterval("setTimer()", 1000); <-not working, should continue the timer again 
    }); 
}); 

Когда ДИВО #p щелкает он начнет игру с таймером, это все работает. Теперь, если я нажму на div .b4, он остановит/разметит таймер, это также сработает. Проблема состоит в том, чтобы снова запустить таймер, продолжая с того места, где он был остановлен.

Я пробовал tI = setInterval("setTimer()", 1000); при нажатии на div #r, но проблема с этим - это запуск таймера, но он не будет продолжаться с момента его остановки. Это будет продолжаться, но с того момента, когда оно должно быть, если оно не было остановлено/опущено.

ТАК как я могу это исправить? Я хочу, чтобы приостановить время (думаю, у меня есть эта часть правильно), а затем продолжить его снова при нажатии #r

Это как моя функция таймера построить:

function gameStart() { 
    setBlocks(); 
    tM = $('#a1 div.tm'); 
    hS = $('#a1 div.hs'); 
    oT = new Date(); 
    tI = setInterval("setTimer()", 1000); 
    setHs(); 
    $('.ht').click(hint); 
    $('.b3').click(reset); 
} 


//Set timer 
function setTimer() { 
    var n = new Date(); 
    tM.text(getTimeText(n.getTime() - oT.getTime())); 
} 

//Build timer 
function getTimeText(v) { 
    var vH = Math.floor(v/3600000); 
    var vM = Math.floor((v - (vH * 3600000))/60000); 
    var vS = Math.floor((v - (vH * 3600000) - (vM * 60000))/1000); 
    return set2Digit(vH) + ':' + set2Digit(vM) + ':' + set2Digit(vS); 
} 

function set2Digit(ov) { 
    var os = '0' + ov; 
    return os.substr(os.length - 2, 2); 
} 

--EDIT--

С этим html я получаю время, чтобы показать: <div class="tm">00:00:00</div>

--EDIT2-- ОК создал новую функцию. Она захватывает приостановленное время, так что с этого момента времени должно продолжаться:

$('#r').click(function() { 
     $('#s1').hide(); 
     tI = setInterval("continueTimer()", 1000); //NEW 
     $('#s2').show(); 
    }); 

//Test 
function continueTimer() { 
    divObj = document.getElementById("tm"); 
    tM.text(divObj.innerText); 
} 

В настоящее время, время паузы, но не продолжается, когда эта функция вызывается ... Так как я запустить таймер с эта точка? Я думаю, что я близко

Answer 1

Это происходит потому, что в setTimer методе вы создаете new Date объект. Поэтому каждый раз, когда этот метод выполняется, он занимает текущее время. Если вы хотите продолжить форму, в которой таймер был остановлен, вместо того, чтобы создавать объект new Date каждый раз, сохраняйте дату начала, когда таймер запускается в переменной, а затем используйте эту переменную внутри метода setTimer.

Измените метод ниже и добавьте глобальную переменную.

var initialTime; 
function setTimer() { 
    tM.text(getTimeText(initialTime.getTime() - oT.getTime())); 
    initialTime.setMilliseconds(1000); 
} 

function gameStart() { 
    setBlocks(); 
    tM = $('#a1 div.tm'); 
    hS = $('#a1 div.hs'); 
    oT = new Date(); 
    initialTime = new Date(); 
    setTimer(); 
    tI = setInterval("setTimer()", 1000); 
    setHs(); 
    $('.ht').click(hint); 
    $('.b3').click(reset); 
} 

Answer 2

Вы можете попробовать ниже,

$('#r').click(function() { 
    oT = new Date(); //this will move the offset date to the resume time.. 
    tI = setInterval(setTimer, 1000); 
});