Wie kann ich den Timer in Javascript stoppen?

Ich möchte, wenn der Benutzer klicken Sie den Timer Stop
wenn l hinzufügen clearInterval l FehlerWie kann ich den Timer in Javascript stoppen?

haben einreichen

mein Code:

<html> 
    <body> 
    <button onclick="myStopFunction()">submit</button> 
<div><span id="time">01:00</span> minutes!</div> 
<script type="text/javascript"> 



    function startTimer(duration, display) { 
     var timer = duration, 
      minutes, seconds; 
       var handle = setInterval(function() { 
      minutes = parseInt(timer/60, 10) //10 the ten system 
      seconds = parseInt(timer % 60, 10); 
      display.textContent = minutes + ":" + seconds; 


    } 

    function myStopFunction() { 
clearInterval(myVar); 
}

Quelle

2016-12-23 malak jameel

Verschieben Sie 'var handle' außerhalb der startTimer-Funktion und ändern Sie' clearInterval (myVar); 'in' clearInterval (handle); ' –

Worauf bezieht sich' myVar'? Wo wird es erklärt? – Bergi

'clearInterval (myVar);' sollte 'clearInterval (handle) sein;' und 'handle' sollte global außerhalb von' startTimer' deklariert werden oder zu einer globalen Variable, die 'myStopFunction' erreichen kann. –

Ihre var handle die die setInterval Funktion enthält existiert nur in seinem Umfang : Die Funktion startTimer. Erklären Sie einfach var handle; aus Ihren Funktionen und rufen Sie clearInterval(handle); in der Stoppfunktion (und natürlich handle = setInterval(function() {...} in Ihrem Code).

Quelle

2016-12-23 10:22:41 BNilsou

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<button type="button" onclick="start()">Start</button> 
<button type="button" onclick="stop()">Stop</button> 
<p id="test"> 

</p> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 


</body> 
</html> 




    var count = 0; 
var myVar; 
    function start() { 
    myVar = setInterval(function() { 
     console.log('hi'); 
     $('#test').text('hi' + count++); 
    }, 1000); 
    return myVar; 
    } 


    function stop() { 
    clearInterval(myVar); 
    }

Quelle

2016-12-23 10:30:00

Wie genau vermeidet dieser Code globale Variablen? – Bergi

@Bergi wenn ich eine Variable 'myVar' außerhalb erstellen werde, dann wird es global sein. –

Außerhalb von was? Das von Ihnen gepostete Snippet * erstellt * eine globale Variable und weist gleichzeitig darauf hin, dies zu vermeiden. – Bergi

Sie sollten intervalHandle außerhalb des StarTimer-Bereichs haben. Es empfiehlt sich, eine Closure (wie unten) zu erstellen, um den globalen Gültigkeitsbereich nicht mit Variablen zu verknüpfen, die nicht veröffentlicht werden müssen.

Bitte denken Sie daran, startTimer aufzurufen.

Sie könnten Lösung haben wie unten:

<html> 
<body> 
<button onclick="myStopFunction()">submit</button> 
<div><span id="time">01:00</span> minutes!</div> 
<script type="text/javascript"> 
    (function() { //create closure to not polute global scope 
     var intervalHandle; 

     function startTimer(duration, display) { 
      var timer = duration, 
        minutes, seconds; 

      //assign interval handle to outer scope 
      intervalHandle = setInterval(function() { 
       minutes = parseInt(timer/60, 10); //10 the ten system 
       seconds = parseInt(timer % 60, 10); 
       display.textContent = minutes + ":" + seconds; 
      }, timer); 
     } 

     function myStopFunction() { 
      clearInterval(intervalHandle); 
     } 

     // export functions to global scope 
     window.startTimer = startTimer; 
     window.myStopFunction = myStopFunction; 
    })(); 
</script> 
</body> 
</html>

Happy Hacking!

Quelle

2016-12-23 10:30:43 Hakier

der Timer funktioniert nicht! –

Sorry, habe vergessen, das zweite Argument von setInterval hinzuzufügen. Aktualisiert Post – Hakier

der Timer immer noch nicht funktioniert, können Sie es bitte in Ihrem Editor versuchen? –

Wie kann ich den Timer in Javascript stoppen?

Antwort

Verwandte Themen