Jak mogę naprawić proces stop-start w tym zegarze stopera JavaScript?

Question

Mam tutaj stoper JavaScript, potrzebuję przycisku start-stop, aby zachować ten sam czas podczas kontynuowania. Obecnie, jeśli zatrzymam i kontynuuję różnicę zegara, jest to coś absurdalnego, na przykład `` -19330839: -3: -53 ''

Czy ktoś może wyjaśnić, jak to naprawiono?

Mam różne stopery metod; jednak wolałbym raczej używać rzeczywistej daty zamiast licznika, ponieważ (testowałem po tym, jak się o tym dowiedziałem), że liczniki są bardzo niedokładne w pewnym okresie czasu.

Każda pomoc jest bardzo ceniona.

html:

Na razie zignoruj ​​przycisk resetowania. Skonfiguruję to później.

        <input id="startstopbutton" class="buttonZ" style="width: 120px;" type="button" name="btn" value="Start" onclick="startstop();">
        <input id="resetbutton" class="buttonZ" style="width: 120px;" type="button" name="btnRst1" id='btnRst1' value="Reset" onclick="resetclock();"/>   
        <div id="outputt" class="timerClock" value="00:00:00">00:00:00</div>

JS:

    const outputElement = document.getElementById("outputt");
    var startTime = 0;
    var running = false;
    var splitcounter = 0;
    
    
    function startstop() {
      if (running == false) {
        running = true;
        startTime = new Date(sessionStorage.getItem("time"))
        if (isNaN(startTime)) startTime = Date.now();
        startstopbutton.value = 'Stop';
        document.getElementById("outputt").style.backgroundColor = "#2DB37B";
        updateTimer();
      } else {
        running = false;
        logTime();
        startstopbutton.value = 'Start';
        document.getElementById("outputt").style.backgroundColor = "#B3321B";
      }
    }
    
    function updateTimer() {
      if (running == true) {
        let differenceInMillis = Date.now() - startTime;
        sessionStorage.setItem("time", differenceInMillis)
        let {
          hours,
          minutes,
          seconds
        } = calculateTime(differenceInMillis);
        let timeStr = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
        
        outputElement.innerText = timeStr;
        requestAnimationFrame(updateTimer);
      }
    }
    
    function calculateTime(milliS) {
      const SECONDS = 1000; // should be 1000 - only 10 to speed up the timer
      const MINUTES = 60;
      const HOURS = 60;
      const RESET = 60;
      
      let hours = Math.floor(milliS / SECONDS / MINUTES / HOURS);
      let minutes = Math.floor(milliS / SECONDS / MINUTES) % RESET;
      let seconds = Math.floor(milliS / SECONDS) % RESET;
      
      return {
        hours,
        minutes,
        seconds
      };
    }
    
    function pad(time) {
      return time.toString().padStart(2, '0');
    }

Potrzebuję tylko timera, aby kontynuować od miejsca, w którym został zatrzymany.

Answer 1

Problem z Twoim kodem:

• Zaczynasz od wartości początkowej dla sessionStorage as, Date.nowale następnie zapisujesz różnicę podczas aktualizacji.
• Dużo współdziałasz z przechowywaniem sesji. Wszelka komunikacja z zewnętrznym API jest kosztowna. Zamiast tego użyj zmiennych lokalnych i znajdź zdarzenie, aby zainicjować wartości.
• Logika różnicy czasu jest nieco błędna.
  • Date.now - startTime nie bierze pod uwagę różnicy między zatrzymaniem a rozpoczęciem.
  • Możesz użyć tej logiki: Jeśli zdefiniowano startTime, oblicz różnicę i dodaj ją do czasu rozpoczęcia. Jeśli nie, zainicjuj go wDate.now()

Propozycje:

• Zamiast dodawać style, używaj klas. To pomoże ci w funkcji resetowania
• Zdefiniuj małe cechy i na ich podstawie zdefiniuj małe funkcje. Ułatwiłoby to ponowne użycie
• Spróbuj uczynić funkcje niezależnymi, przekazując argumenty i polegaj tylko na nich. W ten sposób zmniejszysz efekt uboczny

Uwaga: ponieważ SO nie zezwala na dostęp do pamięci sesji, usunąłem cały powiązany kod.

const outputElement = document.getElementById("outputt");
var running = false;
var splitcounter = 0;
var lastTime = 0;
var startTime = 0;

function logTime() {
  console.log('Time: ', lastTime)
}

function resetclock() {
  running = false;
  startTime = 0;
  printTime(Date.now())
  applyStyles(true)
}

function applyStyles(isReset) {
  startstopbutton.value = running ? 'Stop' : 'Start';
  document.getElementById("outputt").classList.remove('red', 'green')
  if (!isReset) {
    document.getElementById("outputt").classList.add(running ? 'red' : 'green')
  }
}
function startstop() {
  running = !running;
  applyStyles();
  if (running) {
    if (startTime) {
      const diff = Date.now() - lastTime;
      startTime = startTime + diff;
    } else {
      startTime = Date.now()
    }
    
    updateTimer(startTime);
  } else {
    lastTime = Date.now()
    logTime();
  }
}

function printTime(startTime) {
  let differenceInMillis = Date.now() - startTime;
  let {
    hours,
    minutes,
    seconds
  } = calculateTime(differenceInMillis);
  let timeStr = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
  outputElement.innerText = timeStr;
}

function updateTimer(startTime) {
  if (running == true) {
    printTime(startTime)
    requestAnimationFrame(() => updateTimer(startTime));
  }
}

function calculateTime(milliS) {
  const SECONDS = 1000; // should be 1000 - only 10 to speed up the timer
  const MINUTES = 60;
  const HOURS = 60;
  const RESET = 60;

  let hours = Math.floor(milliS / SECONDS / MINUTES / HOURS);
  let minutes = Math.floor(milliS / SECONDS / MINUTES) % RESET;
  let seconds = Math.floor(milliS / SECONDS) % RESET;

  return {
    hours,
    minutes,
    seconds
  };
}

function pad(time) {
  return time.toString().padStart(2, '0');
}

.red {
  background-color: #2DB37B
}

.green {
  background-color: #B3321B
}

<input id="startstopbutton" class="buttonZ" style="width: 120px;" type="button" name="btn" value="Start" onclick="startstop();">
<input id="resetbutton" class="buttonZ" style="width: 120px;" type="button" name="btnRst1" id='btnRst1' value="Reset" onclick="resetclock();" />
<div id="outputt" class="timerClock" value="00:00:00">00:00:00</div>

Answer 2

prosty przykład stopera

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<input class="startstop" style="width: 120px;" type="button" value="Start" onclick="startstop();">
<input class="reset" style="width: 120px;" type="button" value="Reset" onclick="reset();"/>   
<div class="timerClock" value="00:00:00">00:00:00</div>
<script type="text/javascript">
    var second = 0
    var minute = 0
    var hour = 0
    var interval
    var status = false
    var element = document.querySelector('.startstop')
    var clock = document.querySelector('.timerClock')
    var string = ''
    function startstop() 
    {
        if(status == 'false')
        {
            element.value = 'Stop'
            clock.style.backgroundColor = "#2DB37B";
            status = true
            interval = setInterval(function()
            {
                string = ''
                second += 1
                if(second >= 60)
                {
                    minute += 1
                    second = 0
                }
                if(minute >= 60)
                {
                    hour += 1
                    minute = 0
                }

                if(hour < 10)
                    string += `0${hour}:` else string += `${hour}:`

                if(minute < 10)
                    string += `0${minute}:` else string += `${minute}:`

                if(second < 10)
                    string += `0${second}` else string += `${second}`

                clock.innerHTML = string
            },1000)         
        }
        else
        {
            clock.style.backgroundColor = "#B3321B";
            element.value = 'Start'
            status = false
            clearInterval(interval)
        }
    }
    function reset()
    {
        second = 0
        minute = 0
        hour = 0
        status = false
        element.value = 'Start'
        clearInterval(interval)
        clock.innerHTML = `00:00:00`
        clock.style.backgroundColor = "transparent";
    }
</script>
</body>
</html>

Answer 3

Jedną rzeczą, którą należy wiedzieć o requestAnimationFrame, jest to, że zwraca liczbę całkowitą, która jest referencją do następnej animacji. Możesz użyć tego do anulowania następnej animacji oczekiwania za pomocą cancelAnimationFrame.

Jak wspomniał @Rajesh, nie powinieneś przechowywać czasu każdej aktualizacji, ponieważ zatrzyma to bieżący proces na (bardzo) krótki czas. W takim przypadku lepiej odpalić zdarzenie, najlepiej co sekundę, które będzie czekało, aż będzie mogło działać. Nie zaktualizowałem kodu, aby to uwzględnić, na razie tylko skomentowałem.

Lepiej też używać klas niż aktualizować style elementów. Napisałem niechlujny kod, który nadpisuje wszystkie klasy w #outputtelemencie (jest to zapisane jako „wyjście”). To złe programowanie, ponieważ uniemożliwia dodawanie innych klas, ale na razie służy temu celowi. Kod @Rajesh jest lepiej napisany do tego celu.

Dodałem dwie zmienne - diffTimei animationId. Pierwsza z nich koryguje, startTimejeśli użytkownik zatrzymuje się. Drugi śledzi, czy trwa animacja timera.

Przebudowałem Twoje aktualizacje stylu w własną metodę. Powinieneś to sprawdzić, ponieważ definiuje standardowe wartości, a następnie zmienia je za pomocą instrukcji if. To mniej kodu niż konieczność wpisywania document.getElementById("outputt").style...w różnych wierszach.

Dodałem też resetclockmetodę.

const outputElement = document.getElementById("outputt");
var startTime = 0;
var diffTime = 0;
var animationId = 0;

function startstop() {
  const PAUSED = 0;
  let paused = animationId == PAUSED;
  //diffTime = new Date(sessionStorage.getItem("time")) || 0;
  startTime = Date.now() - diffTime;

  if (paused) {
    updateTimer();
  } else {
    cancelAnimationFrame(animationId);
    animationId = PAUSED;
  }  

  updateTimerClass(paused);
}

function updateTimerClass(paused) {
  var outputClass = 'red';
  var buttonText = 'Start';
  
  if (paused) {
    outputClass = 'green';
    buttonText = 'Stop';
  } 
  
  startstopbutton.value = buttonText;
  outputElement.classList = outputClass;
}

function updateTimer() {
  let differenceInMillis = Date.now() - startTime;
  //sessionStorage.setItem("time", differenceInMillis)
  let {
    hours,
    minutes,
    seconds
  } = calculateTime(differenceInMillis);
  let timeStr = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;

  outputElement.innerText = timeStr;
  diffTime = differenceInMillis;
  animationId = requestAnimationFrame(updateTimer);
}

function calculateTime(milliS) {
  const SECONDS = 1000; // should be 1000 - only 10 to speed up the timer
  const MINUTES = 60;
  const HOURS = 60;
  const RESET = 60;

  let hours = Math.floor(milliS / SECONDS / MINUTES / HOURS);
  let minutes = Math.floor(milliS / SECONDS / MINUTES) % RESET;
  let seconds = Math.floor(milliS / SECONDS) % RESET;

  return {
    hours,
    minutes,
    seconds
  };
}

function pad(time) {
  return time.toString().padStart(2, '0');
}

function resetclock() {
  let paused = animationId == 0;
  
  startTime = Date.now();
  diffTime = 0;
  
  if (paused) {
    const REMOVE_ALL_CLASSES = '';
    outputElement.className = REMOVE_ALL_CLASSES;
    outputElement.innerText = '00:00:00';
  }
}

#outputt.green {
  background-color: #2DB37B;
}

#outputt.red {
  background-color: #B3321B;
}

<input id="startstopbutton" class="buttonZ" style="width: 120px;" type="button" name="btn" value="Start" onclick="startstop();">
<input id="resetbutton" class="buttonZ" style="width: 120px;" type="button" name="btnRst1" id='btnRst1' value="Reset" onclick="resetclock();"/>   
<div id="outputt" class="timerClock" value="00:00:00">00:00:00</div>

Answer 4

class Stopwatch {
    constructor(display, results) {
        this.running = false;
        this.display = display;
        this.results = results;
        this.laps = [];
        this.reset();
        this.print(this.times);
    }
    
    reset() {
        this.times = [ 0, 0, 0 ];
    }
  click(){
    var x=document.getElementById('ctrl');
    if(x.value=="start"){
     this.start();
     x.value="stop";
     document.getElementById("outputt").style.backgroundColor = "#2DB37B";
    }
    else{
     x.value="start";
     this.stop();
     document.getElementById("outputt").style.backgroundColor = "#B3321B";
    }
  }
    start() {
        if (!this.time) this.time = performance.now();
        if (!this.running) {
            this.running = true;
            requestAnimationFrame(this.step.bind(this));
        }
    }
    
    stop() {
        this.running = false;
        this.time = null;
    }

    resets() {
        document.getElementById("outputt").style.backgroundColor = "#2DB37B";
        if (!this.time) this.time = performance.now();
        if (!this.running) {
            this.running = true;
            requestAnimationFrame(this.step.bind(this));
        }
        this.reset();
    }
    
    
    step(timestamp) {
        if (!this.running) return;
        this.calculate(timestamp);
        this.time = timestamp;
        this.print();
        requestAnimationFrame(this.step.bind(this));
    }
    
    calculate(timestamp) {
        var diff = timestamp - this.time;
        // Hundredths of a second are 100 ms
        this.times[2] += diff / 1000;
        // Seconds are 100 hundredths of a second
        if (this.times[2] >= 100) {
            this.times[1] += 1;
            this.times[2] -= 100;
        }
        // Minutes are 60 seconds
        if (this.times[1] >= 60) {
            this.times[0] += 1;
            this.times[1] -= 60;
        }
    }
    
    print() {
        this.display.innerText = this.format(this.times);
    }
    
    format(times) {
        return `\
${pad0(times[0], 2)}:\ ${pad0(times[1], 2)}:\
${pad0(Math.floor(times[2]), 2)}`;
    }
}

function pad0(value, count) {
    var result = value.toString();
    for (; result.length < count; --count)
        result = '0' + result;
    return result;
}

function clearChildren(node) {
    while (node.lastChild)
        node.removeChild(node.lastChild);
}

let stopwatch = new Stopwatch(
    document.querySelector('.stopwatch'),
    document.querySelector('.results'));

<input  type="button" id="ctrl" value="start" onClick="stopwatch.click();">
<input  type="button" value="Reset" onClick="stopwatch.resets();">
<div id="outputt"  class="stopwatch"></div>