Как запустить eggtimer после clearInterval()?

Question

Как запустить eggtimer после clearInterval()?

Есть яйцо, которое можно остановить после нажатия на кнопку "Стоп". Я хочу, чтобы этот таймер снова заработал (с того места, где он остановился) после нажатия кнопки "Отмена" в окне подтверждения. Любые предложения? Спасибо за помощь:)

<!DOCTYPE html>
<html>
<body onload="timer();">
<button onclick="exit();">stop</button>
    <p id="seconds">30</p>

    <script type="text/javascript">
        var clock;



        function timer () {
            var start = new Date().getTime();
            clock = setInterval(function() {
                var seconds = Math.round(30 - (new Date().getTime() - start) / 1000);
                if (seconds >= 0)
                    document.getElementById('seconds').innerHTML = seconds;
                else 
                    clearInterval(clock);



                    if (seconds==0) {window.location.href="something.com";
                    return;
                    }




            }, 1000);
        }

function exit(){

 clearInterval(clock);

var result = confirm("Are you leaving?");
if (result == true) {
window.location.href="somewhere.com";
}
else {
timer();} // <-- ????
}


    </script>
</body>
</html>

1

javascript html timer user-experience

Источник

user7196084 27 янв '17 в 16:39

2 ответа

Решение

Вот рабочий пример.
Я переместил seconds переменная вне функции, поэтому она сохраняется и может быть использована для перезапуска таймера.
Кроме того, я добавил аргумент в timer() функция, чтобы можно было изменить количество отсчета.

Обратите внимание, что степень детализации находится на втором уровне, поэтому фактическое время обратного отсчета может в конечном итоге превысить 30 секунд, но я считаю, что это приемлемо в этом случае использования.

var clock;
var seconds;

function timer(wait) {
  var start = new Date().getTime();
  clock = setInterval(function() {
    seconds = Math.round(wait - (new Date().getTime() - start) / 1000);
    if (seconds >= 0)
      document.getElementById('seconds').innerHTML = seconds;
    else
      clearInterval(clock);

    if (seconds == 0) {
      window.location.href = "something.com";
      return;
    }
  }, 1000);
}

function exit() {

  clearInterval(clock);

  var result = confirm("Are you leaving?");
  if (result == true) {
    window.location.href = "somewhere.com";
  } else {
    timer(seconds);
  } // <-- ????
}

timer(30);

<button onclick="exit();">stop</button>
<p id="seconds">30</p>

1

Источник

user1579780 27 янв '17 в 17:00

Другие вопросы по тегам javascript html timer user-experience

user4249374 27 янв '17 в 17:01 2017-01-27 17:01 · Accepted Answer · 2017-01-27 17:01

Вы можете создать переменную, которая будет содержать, в какие секунды вы находитесь;

var sec  = seconds;

Измени свою функцию timer с таймером, который вы хотите начать в качестве параметра

function timer (time)

var clock;
var sec;


function timer (time) {
  var start = new Date().getTime();
  clock = setInterval(function() {
    var seconds = Math.round(time - (new Date().getTime() - start) / 1000);
    sec = seconds;
    if (seconds >= 0){
      document.getElementById('seconds').innerHTML = seconds;
    }
    else{
      clearInterval(clock);
    }
    if (seconds==0){
      window.location.href="something.com";
      return;
    }
  }, 1000);
}

function exit(){
  clearInterval(clock);
  var result = confirm("Are you leaving?");
  if (result == true) {
    window.location.href="somewhere.com";
  }
  else {
  console.log(sec);
    timer(sec);} // <-- ????
}

<body onload="timer(30);">
  <button onclick="exit();">stop</button>
  <p id="seconds">30</p>
</body>