javascript - 设置间隔重新计数？

Question

 var sec = 10 
var timer = setInterval(function() {   
$('#timer span').text(sec--);    
if (sec == -1) {
     clearInterval(timer);  
} }, 1000);

 html

<div id="timer"><span>10</span> seconds</div>
<a href="#" id="recount">Recount</a>

当我点击重新计数时，我想做的是将计时器重新倒计时到 10 秒？

我怎么可能做到？是用setInterval()还是setTimeout()比较好？

Answer 1

将您的代码分解为函数，以便您可以在启动时或单击链接时调用相同的代码。你可以看到它在这里工作:http://jsfiddle.net/jfriend00/x3S7j/ .这甚至允许您在倒计时期间单击链接，它会重新开始。

$("#recount").click(function() {
    initCounter(10);
});

var remainingTime; 
var runningInterval = null;

function initCounter(duration) {

    function stopCounter() {
        if (runningInterval) {
            clearInterval(runningInterval);
            runningInterval = null;
        }
    }

    stopCounter();                              // stop previously running timer
    remainingTime = duration;                   // init duration
    $('#timer span').text(remainingTime);       // set initial time remaining
    runningInterval = setInterval(function() {  // start new interval
        $('#timer span').text(remainingTime--);    
        if (remainingTime < 0) {
            stopCounter();
        } 
    }, 1000);
}


initCounter(10);