Используя jquery, как я могу сделать таймер, который можно немедленно перезапустить и отсчитывать явно?

Текущий jsfiddle

основная проблема заключалась в очистке, независимо от того, что я делаю, интервал, кажется, запускает несколько таймеров для каждого щелчка, даже если я очищаю

Я занимался этим всю ночь. Я просто хотел бы перезапустить таймер обратного отсчета по щелчку. Я пытаюсь дать человеку 5 секунд на подготовку и 7 секунд на выполнение действия. таким образом, он должен начать обратный отсчет с 5, затем обратный отсчет с 7, и в любое время, если щелкнуть, он должен начаться полностью заново.

Это намного сложнее, чем кажется.

Я использовал комбинацию из

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

но так и не смог заставить его работать.


javascript timer jquery setinterval
person Max Meents    schedule 18.09.2015    source источник
comment
Вы должны указать идентификатор, возвращенный setInterval, для clearInterval, т.е. clearInterval(Interval)   -  person kav    schedule 18.09.2015
comment
спасибо за комментарий, но я сделал это   -  person Max Meents    schedule 18.09.2015

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это:

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
Хотел бы я писать такой красивый и сложный код с такой легкостью - person Max Meents; 18.09.2015
comment
Здесь нет ничего особенного, вам просто нужно прочитать одну или две книги, чтобы закрепить свои знания в области js. - person elad.chen; 18.09.2015

arrow_upward
1
arrow_downward

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);`
person Flub    schedule 18.09.2015
comment
как бы вы визуально отсчитывали время с помощью setTimeout? - person Max Meents; 18.09.2015
comment
Вы могли бы использовать 1 секунду (1000 миллисекунд) и сохранить счетчик? - person Flub; 18.09.2015