skY_io
skY_io

Reputation: 13

Stop javascript timer from running in background

i am having an issue while creating a JS timer. When the time end or is manually stopped, the function keep executing seconds--, so even if the time is reset, when started again it starts running at double the speed. How do i manually stop a function? I tried to label it and to use break label; without much success. Here is my code

HTML

<div id="clock-form">
        <i class="fa fa-clock-o" aria-hidden="true"></i> 
        <input type="number" step="10" id="time-minutes" class="time" value="30"><div id="clock-time"></div></div>
        <div id="clock-buttons">
        <button id="play-button" type="submit" name="play"><i class="fa fa-play clock-buttons" aria-hidden="true"></i></button>
        <button id="stop-button" type="submit" name="stop"><i class="fa fa-stop clock-buttons" aria-hidden="true"></i></button>
        </div>

JS

    window.onload = function() {

    if(getCookie("date2")) {
        startCountdown();
    }

    var inputMinutes = document.getElementById("minutes");

    var startButton = document.getElementById("play-button");
    startButton.onclick = function() {
        startCountdown();
    }

    stopButton = document.getElementById("stop-button");
    stopButton.onclick = function() {
        delete_cookie("date2");
        clearInterval("intervalHandle");
        document.getElementById("clock-time").style.display = "none";
        document.getElementById("time-minutes").style.display = "inline";
        // Stop here?   
    }
}

function startCountdown() {
    var minutes = document.getElementById("time-minutes").value;

    if(isNaN(minutes)) {
        alert("Por favor, inserir um número");
        return;
    }
        var dateNow = Math.floor(new Date());

    if(!getCookie("date2")) {
        var dateEnd = (dateNow + (minutes * 60000));
    } else {
        var dateEnd = getCookie("date2");
    }   

    document.cookie = "date2="+dateEnd;

    secondsRemaining = Math.floor((dateEnd - dateNow) / 1000);

    intervalHandle = setInterval(tick, 1000);

    document.getElementById("time-minutes").style.display = "none";
    document.getElementById("clock-time").style.display = "inline";
}


function tick() {
    var timeDisplay = document.getElementById("clock-time");
    var min = Math.floor(secondsRemaining / 60);
    var sec = secondsRemaining - (min * 60);

    if (sec < 10) {
        sec = "0" + sec;
    }

    var message = min + ":" + sec;
    timeDisplay.innerHTML = "<div style=\"display:inline-block; font-family: 'Open Sans'; font-size:0.9em; font-weight: bold;\">" + message + "</div>";

    if(secondsRemaining === 0) {
        alert("Time's over");
        clearInterval("intervalHandle");
        document.getElementById("clock-time").style.display = "none";
        document.getElementById("time-minutes").style.display = "inline";
        delete_cookie("date2");
        // Stop here?
}

    secondsRemaining--;
}

I have omitted functions regarding the cookies. Thanks a lot everybody!

Upvotes: 0

Views: 1020

Answers (1)

Phil
Phil

Reputation: 4069

If you are referring to stopping the code that is running on the interval, simply call clearInterval(intervalHandle)

https://www.w3schools.com/jsref/met_win_clearinterval.asp

I could be totally wrong, but I don't think you want to pass the variable to clearInterval as a string. Instead of calling clearInterval("intervalHandle") call clearInterval(intervalHandle)

Upvotes: 1

Related Questions