1

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,

marekful
  • 14,986
  • 6
  • 37
  • 59
jss
  • 57
  • 1
  • 5
  • 1
    have a search for `clearInterval` and set the interval to a variable name. – Djave Aug 25 '15 at 15:47
  • 3
    possible duplicate of [How do I clear this setInterval](http://stackoverflow.com/questions/2901108/how-do-i-clear-this-setinterval) – lc. Aug 25 '15 at 15:47
  • possible duplicate of [Stop setInterval call in JavaScript](http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) – musefan Aug 25 '15 at 15:49
  • 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 Aug 25 '15 at 15:54

3 Answers3

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.

Mulan
  • 129,518
  • 31
  • 228
  • 259
  • 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 – Deepak Ingole Aug 25 '15 at 15:49
  • 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 – jss Aug 25 '15 at 15:59
0

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

thomasfuchs
  • 5,386
  • 2
  • 18
  • 38
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
});
Silent_Coder
  • 150
  • 1
  • 11