Как продолжить таймер после использования clearInterval (); - PullRequest
Новая
       3

Как продолжить таймер после использования clearInterval ();

1 голос
/ 30 января 2012

У меня есть следующая функция: 

$(document).ready(function() {
    $('#p').click(function() {
        $('#s1').hide();
        gameStart(); <-starts timer
        $('#s2').show();
    });

    $('.b4').click(function() {
        clearInterval(tI); <-stops the time
    });
    $('#r').click(function() {
        tI = setInterval("setTimer()", 1000); <-not working, should continue the timer again
    });
});

При нажатии на div #p запускается игра с таймером, все это работает.Теперь, если я нажму на div .b4, он остановит / приостановит таймер, это также работает.Проблема в том, чтобы снова запустить таймер, продолжая с того места, где он был остановлен.

Я пробовал tI = setInterval("setTimer()", 1000); при нажатии на div #r, но проблема в том, что он запустит таймер, ноэто не будет продолжаться с момента остановки.Это будет продолжаться, но с того времени, когда оно должно быть, если оно не было остановлено / приостановлено.

ТАК, как я могу это исправить?Я хочу приостановить время (думаю, что у меня есть эта часть справа), а затем продолжить его снова, нажав #r

Вот как строится моя функция таймера: 

function gameStart() {
    setBlocks();
    tM = $('#a1 div.tm');
    hS = $('#a1 div.hs');
    oT = new Date();
    tI = setInterval("setTimer()", 1000);
    setHs();
    $('.ht').click(hint);
    $('.b3').click(reset);
}


//Set timer
function setTimer() {
    var n = new Date();
    tM.text(getTimeText(n.getTime() - oT.getTime()));
}

//Build timer
function getTimeText(v) {
    var vH = Math.floor(v / 3600000);
    var vM = Math.floor((v - (vH * 3600000)) / 60000);
    var vS = Math.floor((v - (vH * 3600000) - (vM * 60000)) / 1000);
    return set2Digit(vH) + ':' + set2Digit(vM) + ':' + set2Digit(vS);
}

function set2Digit(ov) {
    var os = '0' + ov;
    return os.substr(os.length - 2, 2);
}

-РЕДАКТИРОВАТЬ -

С помощью этого HTML я получаю время, чтобы показать: <div class="tm">00:00:00</div>

- EDIT2-- Хорошо, создал новую функцию.Он захватывает приостановленное время, поэтому с этого момента время должно продолжаться: 

$('#r').click(function() {
        $('#s1').hide();
        tI = setInterval("continueTimer()", 1000); //NEW
        $('#s2').show();
    });

//Test
function continueTimer() {
    divObj = document.getElementById("tm");
    tM.text(divObj.innerText);
}

В данный момент время приостанавливается, но не продолжается, когда запускается эта функция ... Так как мне запуститьтаймер с этого момента?Я думаю, что я близко

Ответы [ 2 ]

2 голосов
/ 30 января 2012

Это потому, что в методе setTimer вы создаете объект new Date. Таким образом, каждый раз, когда этот метод выполняется, он занимает текущее время. Если вы хотите продолжить форму, где таймер был остановлен, вместо создания new Date объекта каждый раз, сохраните дату начала, когда таймер запускается в переменной, а затем используйте эту переменную в методе setTimer.

Измените метод ниже и добавьте глобальную переменную. 

var initialTime;
function setTimer() {
    tM.text(getTimeText(initialTime.getTime() - oT.getTime()));
    initialTime.setMilliseconds(1000);
}

function gameStart() {
    setBlocks();
    tM = $('#a1 div.tm');
    hS = $('#a1 div.hs');
    oT = new Date();
    initialTime = new Date();
    setTimer();
    tI = setInterval("setTimer()", 1000);
    setHs();
    $('.ht').click(hint);
    $('.b3').click(reset);
}
1 голос
/ 30 января 2012

Можете ли вы попробовать ниже, 

$('#r').click(function() {
    oT = new Date(); //this will move the offset date to the resume time..
    tI = setInterval(setTimer, 1000);
});
...