javascripttimeoutcleartimeout

In JavaScript, how do I clear the interval if the user gets the answer right?


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clear Interval If</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.js"></script>
</head>

<body>
    <div id="main">
    <button onClick="start()">Click</button>
    </div>
    
    
    <script>
        function start(){
            alert('5 seconds')
        setTimeout(function(){
        
    bootbox.prompt({
            className:'questionOne',
        title: "type hspeaker", 
        centerVertical: true,
        callback: function(result){ 
        if(result===null){alert("try again?");bootbox.hideAll();location.reload()}
        var bashed = /hspeaker/i; 
        if(result.match(bashed)===null){alert('incorrect:Try again?');location.reload()}
        var result01 = result.match(bashed);
        if(result01[0]==='hspeaker'){alert('correct:'+result01);}                       
                                    
        }});
        
        setTimeout(function(){alert("out of time")},7000);},5000);}
    
    
    </script>
</body>
</html>

I only want the second Timeout function to run if the user doesn't produce an answer in 7 seconds. I tried to use clearTimeout(), but it was not recognizing my if statements and just running every time regardless if the user answered in time or not. I tried to use it in the

if(result01[0]==='hspeaker'){alert('correct:'+result01);}

Thank you in advance.


Solution

  • store it in a variable and call

    clearTimeout(variableName)
    

    within the conditional

    const timeout = setTimeout(()=> console.log("timeout"),3000);
    
    function stop(){
      clearTimeout(timeout);
      console.log("timeout stopped");
    }
    <button onclick="stop()">Stop Timeout</button>

    function start(){
        alert('5 seconds')
        setTimeout(function(){
            bootbox.prompt({
                className:'questionOne',
                title: "type hspeaker", 
                centerVertical: true,
                callback: function(result){ 
                    if(result===null){
                        alert("try again?");
                        bootbox.hideAll();
                        clearTimeout(outOfTime);
                        location.reload()
                    }
                    var bashed = /hspeaker/i; 
                    if(result.match(bashed)===null){
                        alert('incorrect:Try again?');
                        clearTimeout(outOfTime);
                        location.reload();
                    }
                    var result01 = result.match(bashed);
                    if(result01[0]==='hspeaker'){
                        alert('correct:'+result01);
                        clearTimeout(outOfTime);
                    }                       
                }
            });
    
            const outOfTime = setTimeout(function(){
                alert("out of time")
            },7000);
        },5000);
    }