Повторный запуск таймера после его остановки

Проблема: Когда я нажимаю кнопку запуска после остановки моего таймера, я не могу заставить таймер возобновить работу.Повторный запуск таймера после его остановки

Желаемый результат: Для каждого заданного таймера, когда я нажимаю кнопку «Пуск», после нажатия кнопки «Стоп» я хочу, чтобы время возобновилось там, где оно остановилось.

Я понял, что при нажатии кнопки «Пуск» он просто вызывает функцию setInterval после очистки, однако у меня возникают проблемы с этим.

У меня есть событие остановки в каждой функции в той же области, что и interIDID var, которые содержат функции setInterval. Вот почему работает кнопка остановки. Вызов функций таймера (setPomodoro, setLongBreak, setShortBreak) сбрасывает их таймер в исходное состояние. Кажется, я не понимаю, как возобновить работу со времени таймера, когда он остановлен.

JSBIN:http://jsbin.com/bucalequsi/edit?html,js,output

Воссоздание:

// Problem: Pomodor timer does not have functionality 
// Solution: Add functionality to the pomodor timer. 
//  IF a break timer is running WHILE another is clicked, stop running timer, start clicked timer. 
//  Reset current interval time on reset button. 
//  If break buttons are clicked more than once, reset the time. 
window.onload = function() { 

    var pomodoro = document.querySelector('#set-time'), 
     longBreak = document.querySelector('#long-brk'), 
     shortBreak = document.querySelector('#short-brk'), 
     stopButton = document.querySelector('#stop'), 
     startButton = document.querySelector('#start'), 
     resetButton = document.querySelector('#reset'), 
     container = document.querySelector('#container'), 
     actionButtons = document.querySelector('#buttons'), 
     timer = document.querySelector('#timer'); 

    // Click event for break timers.  
    container.addEventListener('click', function(e) { 
//  store event target 
     var el = e.target; 
      if (el === pomodoro) { 
       setPomodoro(); 
      } else if (el === longBreak) { 
       setLongBreak(); 
      } else if (el === shortBreak) { 
       setShortBreak(); 
      } 
      e.stopPropagation(); 
    }, false); 


// 1.1a Create a timer that counts down from 25 minutes. 
    function setPomodoro() { 
     var mins = 24; 
     var secs = 60; 
     var intervalID = setInterval(function() { //set unique interval ID for each SI func. 
       timer.innerHTML = mins + ':' + secs; 
       secs--; 
       if (secs === 0) { 
        mins--; 
        secs = 60; 
       } 
      }, 1000); 
//  2.2 When stop button is clicked, timer stops 
     stopButton.addEventListener('click', function() { 
       clearInterval(intervalID); 
     }, false); 

    } 

// 1.2a Create a timer that counts down from 10 minutes 
    function setLongBreak() { 
     var mins2 = 9; 
     var secs2 = 60; 
     var intervalID2 = setInterval(function() { 
       timer.innerHTML = mins2 + ':' + secs2; 
       secs2--; 
       if (secs2 === 0) { 
        mins2--; 
        secs2 = 60; 
       } 
      }, 1000); 
     stopButton.addEventListener('click', function(){ 
      clearInterval(intervalID2); 
     }, false); 
    } 
// 1.3a Create a timer that counts down from 5 minutes. 
    function setShortBreak() { 
     var mins3 = 4; 
     var secs3 = 60; 
     var intervalID3 = setInterval(function() { 
       timer.innerHTML = mins3 + ':' + secs3; 
       secs3--; 
       if (secs3 === 0) { 
        mins3--; 
        secs3 = 60; 
       } 
      }, 1000); 
     stopButton.addEventListener('click', function() { 
      clearInterval(intervalID3); 
     }, false); 
    } 
};

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Pomodoro Timer</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="normalize.css"> 
     <link rel="stylesheet" href="main.css"> 

    </head> 

    <body> 

    <div id="container"> 
     <header> 
      <div id="header"><h1>Pomodoro Timer</h1></div> 
     </header> 
     <div class="row"> 
      <ul id="breaks"> 
       <li><input type="submit" value="Pomodoro" id="set-time"></li> 
       <li><input type="submit" value="Long Break" id="long-brk"></li> 
       <li><input type="submit" value="Short Break" id="short-brk"></li> 
      </ul> 
     </div> 
     <h1 id=timer></h1> 
     <div class="row"> 
      <ul id="buttons"> 
       <li><input type="submit" value="Start" id="start"></li> 
       <li><input type="submit" value="Stop" id="stop"></li> 
       <li><input type="submit" value="Reset" id="reset"></li> 
      </ul> 
     </div> 
     <footer> 
      <p>&copy; Laere 2016</p> 
     </footer> 
    </div> 
    <script src="script.js"></script> 
    </body> 
</html>

источник

2016-01-01 Laere

Это может быть, что ваш 'querySelector ('#' будет лучше, так как' getElementById ('и будет значительно опережать бывший –

Да, я на самом деле включили используя querySelector над getElement в моих проектах через CPL недель назад. Спасибо для кончика, хотя тоже;) – Laere

Когда set... функции запускаются с помощью кнопок, вы всегда INITIALIS e - время начала. Вместо этого, если есть уже запущенный таймер, вам нужно проанализировать приостановленную строку времени на минуты и секунды и использовать эти значения для установки ваших варов mins и secs. Возможно, что-то вроде этого будет работать?

function setPomodoro() { 
     if(timer.innerHTML.length > 0){ 
      var t = timer.innerHTML.split(':'); 
      var mins = parseInt(t[0]); 
      var secs = parseInt(t[1]); 
     } 
     else{ 
      var mins = 24; 
      var secs = 60; 
     } 
     var intervalID = setInterval(function() { //set unique interval ID for each SI func. 
       timer.innerHTML = mins + ':' + secs; 
       secs--; 
       if (secs === 0) { 
        mins--; 
        secs = 60; 
       } 
      }, 1000); 
//  2.2 When stop button is clicked, timer stops 
     stopButton.addEventListener('click', function() { 
       clearInterval(intervalID); 
     }, false); 

    }

источник

2016-01-01 19:12:42

Спасибо, что сработало отлично! Разум немного объясняет код? – Laere

@Laere Конечно, это не сложно. Он просто проверяет, имеет ли строка таймера (например, 11:55) ненулевую длину Если это не используется по умолчанию 24 и 60, но разделяет отображаемое время на двоеточие, в результате получается массив 't'. Первый элемент этого (' [0] ') - это минута, второй элемент - секунды Поэтому, когда таймер снова запустится, установив интервал заново, он начинается с «сохраненного» времени. –

имеет смысл, оцените объяснение! – Laere

Повторный запуск таймера после его остановки

ответ

Смежные вопросы