如何在使用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 
    }); 
}); 

当DIV #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); 
} 

- 编辑 -

用这个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); 
});