เมื่อใช้ jquery ฉันจะสร้างตัวจับเวลาที่สามารถรีสตาร์ททันทีและนับถอยหลังอย่างเห็นได้ชัดได้อย่างไร

ลองอันนี้:

var timer = (function() {
    var timer = null;

    return {
        start: function( timesToRun, callback, interval ) {
            var timesRan = 0
            timer = setInterval( function() {
                if ( timesRan < timesToRun ) {
                    timesRan++
                    callback( timesRan, timesRan === timesToRun )
                } else {
                    clearInterval( timer )
                }
            }, interval || 1000 )

            return this 
        },

        stop: function() {
            clearInterval( timer )

            return this
        }
    }
}())

var cyclesLabel = document.getElementById("t")

// first argument is the amount of times to run the interval
// second argument is a callback to use on each iteration
// the 3rd argument is optional and is the interval time in milliseconds.
timer.start( 7, totalCycles, 1000 )

// Reset example
document.getElementById("btn").addEventListener( "click", function() {
   cyclesLabel.textContent = "0"
   timer.stop().start( 5, totalCycles )
} )

// Just for the sake of the example
function totalCycles( cycles, lastCycle ) {
   cyclesLabel.textContent = cycles

   if ( lastCycle === true ) {
     alert( "This is the last chance to do something" )
   }
}

http://jsfiddle.net/eedny9jn/2/

setTimeout() ส่งคืนตัวระบุที่คุณสามารถใช้เพื่อยกเลิกคำขอ:

var timerId = setTimeout(function() { console.log('Now!'); }, 5000);

จากนั้นคุณสามารถยกเลิกได้ในภายหลัง เว้นแต่จะมีการดำเนินการไปแล้ว:

$('#cancelTimerButton').click(function() {  clearTimeout(timerId); });

หากคุณต้องการเห็นภาพคุณสามารถทำสิ่งนี้:

var n = 0;
var tick = function() {
    console.log(n % 2 ? 'Tock' : 'Tick');
    timerId = setTimeout(tick, 1000);
    if (++n == 5) {
        clearTimeout(timerId);
    }
};
var timerId = setTimeout(tick, 1000);`