Dengan menggunakan jquery, bagaimana cara membuat pengatur waktu yang dapat segera dimulai ulang dan menghitung mundur dengan jelas?

Jsfiddle saat ini

masalah utama telah teratasi, apa pun yang saya lakukan, intervalnya sepertinya berjalan beberapa pengatur waktu untuk setiap klik meskipun saya menghapusnya

Aku sudah melakukannya sepanjang malam. Saya hanya ingin memulai ulang penghitung waktu mundur saat diklik. Saya mencoba memberi orang tersebut waktu 5 detik untuk bersiap dan kemudian 7 detik untuk melakukan tindakan. jadi, ia perlu menghitung mundur dari 5 lalu menghitung mundur dari 7 dan kapan saja jika diklik, ia harus memulai sepenuhnya dari awal.

Ini jauh lebih sulit daripada kedengarannya.

Saya menggunakan kombinasi

clearInterval()
var Interval = setInterval(function(){}, 1000);

tapi tidak pernah bisa membuatnya berfungsi.


javascript timer jquery setinterval
person Max Meents    schedule 18.09.2015    source sumber
comment
Anda harus memberikan id yang dikembalikan oleh setInterval ke clearInterval, yaitu clearInterval(Interval)   -  person kav    schedule 18.09.2015
comment
terima kasih telah berkomentar tetapi saya melakukan itu   -  person Max Meents    schedule 18.09.2015

Jawaban (2)


arrow_upward
1
arrow_downward

Coba yang ini:

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/

person elad.chen    schedule 18.09.2015
comment
Saya berharap saya bisa menulis kode yang begitu cantik dan rumit dengan mudah - person Max Meents; 18.09.2015
comment
Tidak ada yang istimewa di sini, Anda hanya perlu membaca satu atau dua buku untuk memperkuat pengetahuan Anda. - person elad.chen; 18.09.2015

arrow_upward
1
arrow_downward

setTimeout() mengembalikan pengidentifikasi yang dapat Anda gunakan untuk membatalkan permintaan:

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

Kemudian Anda dapat membatalkannya nanti, kecuali sudah dijalankan:

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

Jika Anda perlu memvisualisasikannya, Anda dapat melakukan sesuatu seperti ini:

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);`
person Flub    schedule 18.09.2015
comment
bagaimana Anda menghitung mundur secara visual dengan setTimeout? - person Max Meents; 18.09.2015
comment
Anda dapat menggunakan 1 detik (1000 mili) dan menyimpan penghitung? - person Flub; 18.09.2015