Stop javascript timer from running in background

Question

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!

clearInterval("intervalHandle"); that shouldn't be taking a string. It should take the value returned by setInterval — dmeglio
– dmeglio, Commented Mar 9, 2017 at 17:10

Phil · Accepted Answer · 2017-03-09 17:08:51Z

1

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)

answered Mar 9, 2017 at 17:08

Phil

4,0919 gold badges71 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

skY_io Over a year ago

Not exactly, i can clear the interval. The problem is that after i start the interval again, seconds-- is executed again so it runs every half second. To make you understand, if i press play 20 times the times goes incredibly fast

dmeglio Over a year ago

@sky_io That's because you're NOT actually clearing the interval, you just think you are.

Phil Over a year ago

@skY_io - just to check, why don't you add a console.log('test') inside of your "tick" function. Then when you run it, you'll see it logging out test, test, test, etc. When you click stop if you are in fact clearing the interval, the logging will stop. - if it continues, you are not clearing the interval.

Phil Over a year ago

@skY_io - no problem glad to help. If this solves your problem please remember to accept as correct so others know how you resolved the problem.

skY_io Over a year ago

I did several tests, everything works perfectly. I don't know how I didn't think about it, at least I have to say I am a novice. Thanks really Phil!

|

Collectives™ on Stack Overflow

Stop javascript timer from running in background

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related