CODEWITHSUNDEEP
javascriptsetintervalclearinterval
Paul
Paul

Reputation: 33

How to prevent setInterval from being called multiple times simultaneously?

Is there a way to make the setInterval work only once at a time? My code should work this way:

  1. You manually input the number of the seconds;
  2. The "div" works as a timer and runs till reaching 0.

If you click "Click me" once, it will work as expected. However, if you click the button multiple times fast enough, the even listener will be working simultaneously as many times as you clicked.

let button = document.getElementById('button');
let input = document.getElementById('input');
let timer = document.getElementById('timer');

function timerRunner () {
    let startTime = input.value;
    if (startTime <= 0) {
        console.log('The number is <=0')
    } else {
        do {
            timer.textContent = startTime;
            let counter = startTime;
            let interval = setInterval(()=> {
                console.log(counter);
                counter--;
                timer.textContent = counter;
                if (counter === 0) {
                    clearInterval(interval);
                }
            }, 1000);
        } while (typeof (timer.textContent) == "number");
    }
}

button.addEventListener('click', timerRunner)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .centeralizer {
            display: block;
            width: 200px;
            margin: 20vh auto;
        }
        #input {
            display: block;
            margin-bottom: 35px;
            width: 150px;
        }
        #button {
            display: inline-block;
            margin-right: 35%;
        }
        #timer {
            display: inline-block;
        }
    </style>
    <script src="index.js" defer></script>
</head>
<body>
<div class="centeralizer">
    <input id="input" placeholder="Input the number" type="number">
    <button id="button">Click me</button>
    <div id="timer">0</div>
</div>
</body>
</html>

Upvotes: 0

Views: 1957

Answers (2)

Антон Невзгодов
Антон Невзгодов

Reputation: 359

You should store the running interval in the upper scope and clear it if the button is pressed again.

const button = document.getElementById('button');
const input = document.getElementById('input');
const timer = document.getElementById('timer');

let interval = null;

function startTimer() {
    const startTime = +input.value;

    if (startTime <= 0) {
        console.log('The number is <= 0');
        return;
    }
    
    let counter = startTime;
    timer.textContent = startTime;
    if (interval) clearInterval(interval);
    
    interval = setInterval(() => {
        timer.textContent = --counter;
        console.log(counter);
        if (counter === 0) clearInterval(interval);
    }, 1000);
}

button.addEventListener('click', startTimer)

Upvotes: 3

Adam Neuwirth
Adam Neuwirth

Reputation: 537

You can add a boolean variable isRunning that tracks whether the timer is running. You set it on when the timer is running and set it off when the timer is done. Check if it's on when the button is clicked, and return if it is. You can prevent multiple instances of the timer being triggered.

let button = document.getElementById('button');
let input = document.getElementById('input');
let timer = document.getElementById('timer');

var isRunning = false;

function timerRunner () {
    if(isRunning) {
         return; //return if timer is already running
    }
    isRunning = true; //specify that the timer is running

    let startTime = input.value;
    if (startTime <= 0) {
        console.log('The number is <=0')
    } else {
        do {
            timer.textContent = startTime;
            let counter = startTime;
            let interval = setInterval(()=> {
                console.log(counter);
                counter--;
                timer.textContent = counter;
                if (counter === 0) {
                    isRunning = false; //specify that the timer is not running and can be run again
                    clearInterval(interval);
                }
            }, 1000);
        } while (typeof (timer.textContent) == "number");
    }
}

button.addEventListener('click', timerRunner)

Upvotes: 1

Related Questions