javascript timer doubles the time value each time it resets and reruns

user_14231326 0
Viewed 158

i am starting some javascript projects and i found some difficulties with this timer first issue is that the stop button doesn't work and i tried many code but nothing works then each time i click on reset instead of going from 1 to 2 to 3 it goes 1 then 2 and 4 then 8 and so on i tried looking with the interval but the first time it goes right so i checked the reset function

var timer = document.querySelector("#timer");
var start = document.querySelector("#start");
var pause = document.querySelector("#stop");
var stop = document.querySelector("#stop");



var time_stopped = true;
var hours = 0;
var minutes = 0;
var seconds = 0;




function start_timer() {
    if (time_stopped == true){
        time_stopped = false;
        cycle();
    }
    console.log("timer started!");
    pause.style.display = "unset";
}

function stop_timer() {
    if (stop_timer == false) {
        stop_timer = true;

    }
    console.log("time stopped!");
    pause.style.display = "none";



}

function restart_timer() {
    timer.innerHTML = "00 00 00";
    hours = 0;
    minutes = 0;
    seconds = 0;
    time_stopped = true;
    cycle();

}

function cycle() {

    
    if (time_stopped == false) {
        hours = parseInt(hours);
        minutes = parseInt(minutes);
        seconds = parseInt(seconds);

        seconds = seconds + 1;


        if (seconds == 60) {
            minutes += 1;
            seconds = 0;
        }

        if (minutes == 60) {
            hours += 1;
            minutes = 0;
        }



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

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

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




        timer.innerHTML = `${hours}:${minutes}:${seconds}`;
        setInterval(cycle,1000);

    }
}

and here's the html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stopwatch (timer)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>

    <div id="timer">
        
            00:00:00
        
    </div>
    <ul>
        <button id="start" onclick="start_timer()">start</button>
        <button id="stop" onclick="stop_timer()">stop</button>
        <button id="restart" onclick="restart_timer()">restart</button>
    </ul>
    </div>


    <script src="script.js"></script>
</body>
</html>
web function css javascript
1 Answers

The function setInterval doesn't just setup one timeout event, it sets up a repeating schedule of them.

So, as noted in the comments, every time you call cycle() you are creating an additional timer schedule, causing them to effectively double every interval.

To fix this you need to change to setTimeout instead of set Interval, or alternatively call clearInterval before you make a new setInterval call (or just do neither, as setInterval is already doing the repeating for you). This doc explains all of these functions: https://javascript.info/settimeout-setinterval

user_1091220
Related