Tips for ending a setInterval loop

Question

Tips for ending a setInterval loop

I have created a setInterval function in JavaScript to switch the color of a div by applying different CSS classes. Initially, I trigger this color change by pressing a button. However, I am also trying to stop the color transition using the same button but it's not working as expected. Below is my JS code:

    var bsstyles = ["alert alert-success","alert alert-info","alert alert-warning","alert alert-danger"];

    var i = 0;

    var buttonstate = false;

    var runner;

    var mainfun = function () {
        if (buttonstate === false) {
            buttonstate = true;
            document.getElementById("changebutton").className = "btn btn-primary btn-lg active";
            var runner = setInterval(function() {
                document.getElementById("alertw").className = bsstyles[i];
                i++;
                if (i == bsstyles.length) {
                        i = 0;
                }
            },1000);
        } else {
            clearInterval(runner);
            document.getElementById("changebutton").className = "btn btn-primary btn-lg";
            buttonstate = false;
        }
    }

    var changeButton = document.getElementById("changebutton");

    changeButton.addEventListener('click',mainfun,false);

Check out the JSFiddle here

javascript setinterval

Answer 1

Answer №1

make sure to exclude the var keyword before 'runner' while defining mainfun

using the var keyword creates a new local variable instead of referencing the global variable runner

the corrected code should appear like this

var bsstyles = ["alert alert-success","alert alert-info","alert alert-warning","alert alert-danger"];

var i = 0;

var buttonstate = false;

var runner; // remove var here

var mainfun = function () {
    if (buttonstate == 0) {
        buttonstate = true;
        document.getElementById("changebutton").className = "btn btn-primary btn-lg active";
        runner = setInterval(function() {
            document.getElementById("alertw").className = bsstyles[i];
            i++;
            if (i==bsstyles.length) {
                    i=0;
            }
        },1000);
    } else {
        clearInterval(runner);
        document.getElementById("changebutton").className = "btn btn-primary btn-lg";
        buttonstate = false;
    }
}

var changeButton = document.getElementById("changebutton");

changeButton.addEventListener('click',mainfun,false);

Answer 2

make sure to exclude the var keyword before 'runner' while defining mainfun

using the var keyword creates a new local variable instead of referencing the global variable runner

the corrected code should appear like this

var bsstyles = ["alert alert-success","alert alert-info","alert alert-warning","alert alert-danger"];

var i = 0;

var buttonstate = false;

var runner; // remove var here

var mainfun = function () {
    if (buttonstate == 0) {
        buttonstate = true;
        document.getElementById("changebutton").className = "btn btn-primary btn-lg active";
        runner = setInterval(function() {
            document.getElementById("alertw").className = bsstyles[i];
            i++;
            if (i==bsstyles.length) {
                    i=0;
            }
        },1000);
    } else {
        clearInterval(runner);
        document.getElementById("changebutton").className = "btn btn-primary btn-lg";
        buttonstate = false;
    }
}

var changeButton = document.getElementById("changebutton");

changeButton.addEventListener('click',mainfun,false);

Answer 3

Answer №2

One approach I often take is to save Interval handles directly on the function itself, especially when there will only be one instance:

myFunction.timer = setInterval(function () {
    //Code here
}, 1000);
clearInterval( myFunction.timer );

This method helps avoid having a global variable like 'timer' that could accidentally be overwritten. Although myFunction.timer can still be accessed globally, it's less likely to be modified inadvertently.

Answer 4

One approach I often take is to save Interval handles directly on the function itself, especially when there will only be one instance:

myFunction.timer = setInterval(function () {
    //Code here
}, 1000);
clearInterval( myFunction.timer );

This method helps avoid having a global variable like 'timer' that could accidentally be overwritten. Although myFunction.timer can still be accessed globally, it's less likely to be modified inadvertently.

Answer 5

Answer №3

Although it has been mentioned before by other responders, the key issue lies in overwriting a global variable with a local one. Here's a simplified version of your code:

let runner = null;
let i = 0;

const changeClassById = (id, className) => {
    document.getElementById(id).className = className;
};

const mainFunction = () => {
    if (runner) {
        clearInterval(runner);
        changeClassById("changebutton", "btn btn-primary btn-lg");
        runner = null;
    } else {
        changeClassById("changebutton", "btn btn-primary btn-lg active");
        runner = setInterval(() => {
            changeClassById("alertw", bsstyles[++i % bsstyles.length]);
        }, 1000);
    }
}

Reducing the number of lines of code reduces the likelihood of errors.

Answer 6

Although it has been mentioned before by other responders, the key issue lies in overwriting a global variable with a local one. Here's a simplified version of your code:

let runner = null;
let i = 0;

const changeClassById = (id, className) => {
    document.getElementById(id).className = className;
};

const mainFunction = () => {
    if (runner) {
        clearInterval(runner);
        changeClassById("changebutton", "btn btn-primary btn-lg");
        runner = null;
    } else {
        changeClassById("changebutton", "btn btn-primary btn-lg active");
        runner = setInterval(() => {
            changeClassById("alertw", bsstyles[++i % bsstyles.length]);
        }, 1000);
    }
}

Reducing the number of lines of code reduces the likelihood of errors.

Answer 7

Answer №4

Your if statement is modifying the definition of runner. Delete the usage of var: http://jsfiddle.net/g6to2gqn/2/

Answer 8

Your if statement is modifying the definition of runner. Delete the usage of var: http://jsfiddle.net/g6to2gqn/2/

Answer 9

Answer №5

You have mistakenly redefined the interval runner variable; Simply delete 'var' from this line

runner = setInterval(function() {

Check out this link for more information: http://jsfiddle.net/g6to2gqn/4/

Answer 10

You have mistakenly redefined the interval runner variable; Simply delete 'var' from this line

runner = setInterval(function() {

Check out this link for more information: http://jsfiddle.net/g6to2gqn/4/

Tips for ending a setInterval loop

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unprocessed Promise Rejection Alert: The function res.status is not recognized as a valid function (NEXT JS)

How can state values be transferred between components?

Stopping an HTML5 range input at a specific number: Tips and tricks

The attempt to compress the code in the file from './node_modules/num2persian' using num2persian was unsuccessful

Patience is key for a fully completed JSON in JavaScript

Is there a way for me to connect to my Firebase Realtime Database using my Firebase Cloud Function?

Position the div so that it is aligned with the top offset of another element

Is there a way to manipulate text in JQuery without altering the inner element?

Include specific javascript files only for smartphones

Reverse key-value pairs within a nested object using JavaScript

"Is there a specific way to designate the content type as multipart form data when using Axios

Issues with user-generated input not properly functioning within a react form hook

Issue encountered while managing login error messages: http://localhost:3000/auth/login net::ERR_ABORTED 405 (Method Not Allowed)

There is a random section that keeps crashing on the website

Having trouble with your Discord.js Bot continuously going offline and getting Value errors? Here’s how to resolve it

Converting a string date format to UTC: A step-by-step guide

Recommendations for a UI library specializing in displaying analytical graphs

extracting web content with selenium and javascript integration

Guide to displaying a spherical grid helper in Three JS

What is the best way to add JSON data received from an AJAX response to multiple classes?