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,

Answer 1

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.

Answer 2

存储setInterval调用的结果值，并使用clearInterval停止进一步执行间隔。

Answer 3

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
});