clearTimeout() Timer nicht löschen

Question

function countDown(secs,elem) 
{ 
    var element = document.getElementById(elem); 
    element.innerHTML = "Game ends in " + secs + " seconds!"; 
    if(secs<1) 
    { 
     clearTimeout(timer); 
     document.getElementById('gameContent').style.display='none'; 

    } 
    secs--; 
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000); 

} 

<div class="timerCount" id="status"></div> 
<script>countDown(5,"status");</script> 

Mein Timer startet korrekt nach 5 Sekunden und dekrementiert. Mein Spiel div versteckt sich nach dem Timer erreicht 0 aber der Timer löscht nicht aus und endet stattdessen wird es auf negativ. Please my bug in meinem Code, um den Timer zu stoppen und zu löschen

Answer 1

Es ist effizienter, wenn Sie nur setInterval verwenden und etwas tun, wie folgt aus:

function countDown(secs, elem) { 
 
    var interval; 
 
    var element = document.getElementById(elem); 
 
    var timer = setInterval(function() { 
 
    secs--; 
 
    update(); 
 
    if (secs < 1) { 
 
     clearInterval(timer); 
 
    } 
 
    }, 1000); 
 

 
    function update() { 
 
    if (secs > 0) { 
 
     element.innerHTML = "Game ends in " + secs + " seconds!"; 
 
    } else { 
 
     document.getElementById('gameContent').style.display = 'none'; 
 
    } 
 
    } 
 
    update(); 
 

 
} 
 

 
countDown(5, "status");

<div id="gameContent"> 
 
    <h1>Game</h1> 
 
    <div class="timerCount" id="status"></div> 
 
</div>

Answer 2

Das Löschen der Zeitüberschreitung macht keinen Sinn, da Sie in der Rückruf von der Zeitüberschreitung, die Sie löschen möchten aufgerufen, so dass es wirklich nichts zu löschen ist . Selbst wenn Sie timer als globale Variable deklarieren würden, würde das immer noch nicht mit diesem konzeptionellen Problem umgehen.

Ihr Problem ist wirklich, dass Sie immer noch anrufen setTimeout, nachdem Ihre Sekunden abgelaufen sind. So beenden Sie die Funktion bevor dies zu tun (oder benutzen Sie else):

function countDown(secs,elem) 
{ 
    var element = document.getElementById(elem); 
    element.innerHTML = "Game ends in " + secs + " seconds!"; 
    if(secs<1) 
    { 
     document.getElementById('gameContent').style.display='none'; 
     return; // <-------- add this! 
    } 
    secs--; 
    // avoid passing string as first argument to setTimeout: 
    setTimeout(countDown.bind(null, secs, elem),1000); 
} 

NB: es schlechte Praxis betrachtet wird eine Zeichenfolge als erstes Argument an setTimeout weitergeben müssen: diese Zeichenfolge müssen ausgewertet werden, genau wie bei eval . Neben den Vorbehalten, die Programmierer mit eval haben, ist es in diesem Fall auch weniger effizient und unnötig.