2017-11-02 1 views
-2

Ich versuche, einen Reaktionszeitgeber nur mit js zu bauen, aber wann immer ich earlyClick starte, scheint mein setTimeout zu funktionieren. Wenn ich nicht früh klicke, tritt das Problem nicht auf. Ich muss nur das Problem von earlyClick beheben. Bitte helfen Sie!wie in diesem Fall die setTimeout-Funktion in Javascript zu stoppen?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Reflex Calculator</title> 
    <link rel="stylesheet" type="text/css" href="reflexCalculator.css"> 
</head> 
<body> 

<div id="container"> 

    <h1 id="seconds"></h1> 
    <h2 style="text-align: center;" id="text">Click to begin.</h2> 

</div> 

<script type="text/javascript"> 

var startTime, endTime, difference; 
    /*sets delay amount*/ 

    var randomNumberBetween2and19 = Math.floor(Math.random() * 20)+2; 
    function delay1(){ 
     var seconds=randomNumberBetween2and19/5; 
     return seconds; 
    } 
    var time=delay1().toFixed(3); 
    /*program begins*/ 
    document.getElementById("container").onclick=function(){ 
    firstClick();} 
    /*Reflex timer starts with initial color green!*/ 
    function firstClick(){ 

     document.getElementById("container").style.background="red";/*green*/ 
     document.getElementById("text").innerHTML="wait till blue"; 

das ist, wo das Hauptproblem auftritt, aber ich weiß nicht, wie es zu beheben ich will nur, wenn ich früh klicken, laufen earlyClick Funktion und stoppen SetTimeout

 if(document.getElementById("container").clicked) earlyClick(); 


     else setTimeout(calculateReflex, time*1000); 
    } 
    function earlyClick(){ 
     document.getElementById("text").innerHTML="Too Early! You have to 
     start over again."; 
     document.getElementById("container").style.background="yellow"; 
     //document.getElementById("container").onclick=function(){start();} 
     document.getElementById("container").onclick=function() 
    {lastClick();} 
    } 
    /*function where i use delay to calculate reflex*/ 
    function calculateReflex(){ 
     startTime=Date.now(); 
     document.getElementById("container").style.background="blue"; 
     document.getElementById("text").innerHTML="CLICK!"; 
     document.getElementById("container").onclick=function(){result();}  
    } 
    function result(){ 
     endTime=Date.now(); 
     difference=endTime-startTime; 
     document.getElementById("container").style.background="#fc3"; 
     document.getElementById("text").innerHTML="your reflex is 
"+difference/1000+"s"+"<br/>Click to restart"; 
     document.getElementById("container").onclick=function() 
{lastClick();} 
    } 
    /*For reload*/ 
    function lastClick(){ 
     window.location.reload(); 
    } 

</script> 

</body> 
</html> 
+0

Es ist die einzige dokumentierte Weg zu [stoppen den Timeout] (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout) . – Teemu

Antwort

0

eine setTimeout zu stoppen Sie müssen die Zeitlimit-ID speichern, wenn Sie ein Zeitlimit erstellen: var timeoutId = setTimeout(...); Verwenden Sie dann clearTimeout(timeoutId), um das Zeitlimit zu löschen, bevor es abgelaufen ist.

0

versuchen diese

var myVar = setTimeout(function, milliseconds); 
clearTimeout(myVar); 
Verwandte Themen