Der Timer stoppt nicht, nachdem die Pause-Taste angeklickt wurde

Question

Der Timer wird angezeigt, als ob es eine Art Stopp nach Pause ist. Wenn ich aber auf "Weiter" klicke, finde ich heraus, dass der Counter weiterhin hinter der Szene läuft. Ich denke, es gibt Probleme mit setInterval. Bitte hilf mir. Mein Projekt auf CodePen als Referenz, wenn Sie brauchen.

Meine Timer-Funktion

function timer(seconds) { 
    clearInterval(countdown); 
    const now = Date.now(); 
    const then = now + seconds * 1000; 
    displayTimerLeft(seconds); 
    console.log({ 
    now, 
    then 
    }); 
    countdown = setInterval(() => { 
    if (!isPaused) { 
     const remainSeconds = Math.round((then - Date.now())/1000); 
     if (remainSeconds < 0) { 
     clearInterval(countdown); 
     return; 
     } 
     displayTimerLeft(remainSeconds); 

    } 
    }, 1000); 

} 

Pause und starten Sie Click-Ereignisse

pause.addEventListener('click', function() { 
    isPaused = true; 
    return; 

}) 

start.addEventListener('click', function() { 
    isPaused = false; 
}) 

Answer 1

Behalten Sie einen Verweis auf die aktuelle Uhrzeit und fügen Sie bei jedem Tick manuell eine Sekunde hinzu.

function timer(seconds) { 
    clearInterval(countdown); 
    const t = new Date(); 
    const end = t.getTime() + seconds * 1000; 
    displayTimerLeft(seconds); 
    console.log({ 
    t, 
    end 
    }); 
    countdown = setInterval(() => { 
    if (!isPaused) { 
     const remainSeconds = Math.round((end - t.getTime())/1000); 
     if (remainSeconds < 0) { 
     clearInterval(countdown); 
     return; 
     } 
     displayTimerLeft(remainSeconds); 
     t.setSeconds(t.getSeconds() + 1); 
    } 
    }, 1000); 
} 

Demo: http://codepen.io/miguelmota/pen/wgMzXY

Answer 2

setInterval gibt eine eindeutige ID, die verwendet werden können, mit dem Timer clearInterval zu stoppen:

var id = setInterval(function(){ 
console.log('running every 300 ms'); 
},300); 

clearInterval(id) // stop timer 

Answer 3

Suche Bei Ihrem Code, nehme ich an, das Problem ist, dass Sie die gleichebehaltenWert, der letztendlich ein Zeitstempel ist, zu dem der Timer enden sollte. Anstatt den Countdown zu pausieren, halten Sie jetzt an, dass sich die Anzeige nicht ändert.

Ich würde empfehlen, stattdessen Ihre Variable seconds (und Berechnung der Anzeige mit Modulo%), und verringern Sie es jede Sekunde. Auf diese Weise würde das Pausieren der Anzeige effektiv die Verringerung anhalten.