Stop JavaScript Interval

Question

Is it possible to stop a function that is currently running as a setInterval?

This is my code:

This is the function im calling

function pull_light_status (lights_array) {
    $.getJSON( "resources/php/getjson.php", function( json ) {
        var vera_obj = json;
        $.each(lights_array,function(myindex, myvalue){
        var id_del_object = myvalue - 1;
        var variable_del_id = vera_obj.devices[id_del_object].states[0].variable;
        var status_del_id;
        if (variable_del_id == "Status"){
            status_del_id = vera_obj.devices[id_del_object].states[0].value;
        }else{
            variable_del_id = vera_obj.devices[id_del_object].states[1].variable;
            status_del_id = vera_obj.devices[id_del_object].states[1].value;    
        }
        if (status_del_id == "1"){
            $("#light"+myvalue).attr("src","resources/img/on_toggle.png");                  
        } else {
            $("#light"+myvalue).attr("src","resources/img/off_toggle.png");  
        }
            console.log("ID: " + myvalue + ">>>>> " + variable_del_id + ">>>>> " + status_del_id);
    })
    })     
}

on the main interfase when i go to the "living room section" i load the html and also the function "pull_lights_status" and also set the interval as follows

$("#livingroom").click(function(){
    $(".roomsdbl").hide();
    $(".rooms").hide();
    $("#roomwrapper").css("display","block");
    $("#roomwrapper").load("resources/data/livingroom.html",function() {       


        lights_array = [23,24,25,26];


        //load pull_light_status
        pull_light_status(lights_array);
        setInterval(function(){
            pull_light_status(lights_array);
        },10000);



            $(".closebutton").click(function(){  // Close button
            $("#roomwrapper").hide();
            $(".roomsdbl").show();
            $(".rooms").show();
            }); 
    }) 
})

This will update the state of my lights every 10 seconds. The problem im having is that when i close that section (actually hiding when using .closebutton) and i go to another section lets say main room that is loading the same pull_light_status function, then every 10 seconds its going to go and fetch the status twice and everytime i close and open a section, even if its the same, it will add another setInterval.

what i would like that when i click the .closebutton on Living rooom to stop the pull_light_status from running on the background and just the one im loading when loading the room.

I dont know if i explained myself correctly. My coding skills are not very good so the code might be messy and repetitive, im the learning process

Kind regards,

have a search for clearInterval and set the interval to a variable name. — Djave
– Djave, Commented Aug 25, 2015 at 15:47
Are you trying to stop the interval, or do you really want to interrupt the function execution? (the latter I am not so sure is possible) — musefan
– musefan, Commented Aug 25, 2015 at 15:54

Mulan · Accepted Answer · 2015-08-25 15:49:10Z

3

After you use setInterval you can use clearInterval to stop it

var pullInterval = setInterval(fn, 10000);

// some later time ...
clearInterval(pullInterval);

At any point, if you wish to restart the interval, just use setInterval again.

edited Aug 25, 2015 at 15:49

answered Aug 25, 2015 at 15:47

Mulan

136k35 gold badges240 silver badges276 bronze badges

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

2 Comments

Deepak Ingole Over a year ago

Master are you sure OP is looking for same? To me it sounds like stopping the execution in between.. stop a function that is currently running as a setInterval

jss Over a year ago

Everytime i load a "room" i call the function pull_light_status and pass the array of the lights id belonging to that specific room. Every 10 seconds it will do a getJson to get the latest status and then set the icons accordingly. Lets say i first open "living room" that loads the function .... and run every 10 seconds .... then when i close and go to "main room" ... now i got the function running twice every 10 seconds ... what i need is once i leave the "living room" to stop running that function i loaded initially

Silent_Coder · Accepted Answer · 2015-08-25 16:03:53Z

0

Create a global variable which can store your timer reference and then do clearinterval at the closebutton click event.

var lightTimer = null; //global variable
 $("#livingroom").click(function() 
 {
    $(".roomsdbl").hide();
    $(".rooms").hide();
    $("#roomwrapper").css("display", "block");
    $("#roomwrapper").load("resources/data/livingroom.html", function() {
        lights_array = [23, 24, 25, 26];


        //load pull_light_status
        pull_light_status(lights_array);
        lightTimer = setInterval(function() {
            pull_light_status(lights_array);
        }, 10000);
    });
}); `

And why not keep the closebutton outside the living room event?

$(".closebutton").click(function() { // Close button
    $("#roomwrapper").hide();
    $(".roomsdbl").show();
    $(".rooms").show();
    clearInterval(lightTimer); //this will immediately stop your timer
});

answered Aug 25, 2015 at 16:03

Silent_Coder

1501 silver badge11 bronze badges

2 Comments

jss Over a year ago

I will try that. and post bakc

Silent_Coder Over a year ago

Glad it did! Happy Coding! :)

thomasfuchs · Accepted Answer · 2015-08-25 15:48:02Z

0

Store the resulting value of the setInterval call and use clearInterval to stop further execution of the interval.

answered Aug 25, 2015 at 15:48

thomasfuchs

5,6162 gold badges21 silver badges38 bronze badges

Collectives™ on Stack Overflow

Stop JavaScript Interval

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related