Сделать секундомер живым между запросами

Question

Я новичок в Ractive.js. Мне нужно реализовать секундомер, который будет работать, даже если я нажму на другую страницу. Мой секундомер работает, но когда я нажимаю на другую страницу, а затем возвращаюсь к текущей странице, секундомер уходит. Может кто-нибудь, пожалуйста, помогите мне в этом, пожалуйста? Вот мои попытки ниже:

на мой взгляд >>>

<div class="modal-footer"> 
     <div class="form-group"> 
      <div class="pull-left"> 
       Stopwatch: {{#stopWatch}} {{hours}} h: {{minutes}} m: {{seconds}} s{{/stopWatch}} 
      </div> 
      <button id="btnStart" class="btn btn-primary" type="button" on-click="startStopWatch">Start</button> 
      <button id="btnReset" class="btn btn-secondary" type="button" on-click="startStopWatch">Reset</button> 
     </div> 
     <label class="pull-left stopWatch"> Time Spent:</label> 
    </div> 

моя startStopWatch функция >>>

function startStopWatch(ev, cfg) { 
    var rjs = this || cfg.rjs; 
    var $btn = $(ev.node); 
    var btnText = $btn.text(); 
    var sg; 

    if (btnText === 'Start') { 
     $btn.html('Stop'); 
     sg = new cmnDt.stopWatch(); 
     sg.start(rjs, sg); 
    } else if (btnText === 'Stop'){ 
     $btn.html('Start'); 
     sg = ev.context.sw; 
     sg.stop(rjs, sg); 
    } 

    if (btnText === 'Reset' && ev.context.sw) { 
     sg = ev.context.sw; 
     sg.reset(rjs, sg); 
     $('#btnStart').html('Start'); 
    } 
} 

моя функция секундомера >>>

function stopWatch() { 

     var currentSeconds = 0; 
     var currentMinutes = 0; 
     var currentHours = 0; 
     var timer; 

     function start(rjs, sw) { 
      printTime(rjs, sw); 
      timer = setInterval(function() { 
       getTime(); 
       printTime(rjs, sw); 
      }, 1000); 
     } 

     function getTime(rjs) { 
      currentSeconds = currentSeconds + 1; 
      if (currentSeconds === 60) { 
       currentMinutes += Math.round((currentSeconds)/60); 
       currentSeconds = 0; 
      } else if (currentSeconds === 60 && currentMinutes === 60) { 
       currentMinutes = 0; 
       currentSeconds = 0; 
       currentHours += 1; 
      } 
     } 

     function printTime(rjs, sw) { 
      rjs.set({'sw': sw, 'stopWatch.seconds': currentSeconds, 
        'stopWatch.minutes': currentMinutes, 'stopWatch.hours': currentHours}); 
     } 

     function stop(rjs, sw) { 
      clearInterval(timer); 
      printTime(rjs, sw); 
      $('.stopWatch').text(' Time Spent: ' + currentMinutes + ' m : ' + currentSeconds + ' s.'); 
     } 

     function reset(rjs, sw) { 
      clearInterval(timer); 
      currentSeconds = 0; 
      currentMinutes = 0; 
      currentHours = 0; 
      printTime(rjs, sw); 
     } 

     return { 
      start: start, 
      stop: stop, 
      reset: reset 
     }; 
    } 

Answer 1

If вы меняете сайт и возвращаетесь, весь сценарий инициализируется с самого начала. Вам необходимо сохранить текущее значение секундомера и временную метку текущего значения навсегда.

Для этого есть две возможности: местные storage и cookies.

В теля Тяговая, вот пример того, как подразумевается локальное хранилище для использования: http://examples.ractivejs.org/todos

если реализовать, скажем, одна функция saveToStorage() и один initFromStorage(), то ваш секундомера может показать истинное время, если вы вернетесь на сайт. Но имейте в виду, что секундомер не «работает в некотором фоне». Он просто инициализируется с момента последнего сохранения. Это важно, потому что, например, ваш секундомер не может запускать события, пока вы находитесь на другом сайте.

---

Редактировать 15.3.16

Найти здесь рабочий секундомера в скрипкой:

https://jsfiddle.net/cw67L17e/2/

Я начал изменять свой код, но потом я подумал, что лучше дизайн с самого начала. У меня нет времени, чтобы вникать в специальности ractivejs. Но я надеюсь, что вы сможете изучить новые и полезные идеи, изучив его. Короткий намек, как использовать, находится в скрипке справа.

Примечания:

• Только для измерения времени, вам не нужно «остановить часы» в узком смысле. Как вы увидите, достаточно хранить отметки времени. Вам действительно нужны только методы prepareToLeave() и resume().
• Я предлагаю не обрабатывать секунды, минуты и часы как комбинированный тип. Просто обрабатывайте временные метки и конвертируйте их, когда это необходимо, как показано в millisToHMS(). Поскольку обработка миллисов - это общий подход, который также позволит выполнять многие другие задачи.
• Рассмотрите localStorage.setItem() и localStorage.getItem().
• Если вы хотите автоматизировать, вы можете позвонить resume(), как только документ будет готов или загружен (document.ondomcontentready). Там вы должны найти свой путь ractivejs.