setInterval重新计票

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);

Answer 2

您可以添加一个click处理程序，并在单独的方法中提取您的代码:

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

工作JSFiddle

Answer 3

当您单击重新计数时，您应该

sec = 10;
clearInterval(timer);
timer = setInterval(that_function, 1000);

setInterval与setTimeout之间也存在差异。setInterval调度函数每隔几毫秒调用一次。setTimeout调度函数在几毫秒后调用一次。