停止 JavaScript 间隔

Question

是否可以停止当前运行作为 setInterval 的功能？

这是我的代码：

这是我正在调用的函数

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

在主界面上，当我转到 "living room section" 时，我加载了 html 以及函数 "pull_lights_status" 并且还设置了如下间隔

$("#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();
            }); 
    }) 
})

这将每 10 秒更新一次我的灯的状态。我遇到的问题是，当我关闭该部分（实际上在使用 .closebutton 时隐藏）并且我转到另一个部分让我们说主房间正在加载相同的 pull_light_status 功能，然后每 10 秒它就会去和两次获取状态，每次我关闭和打开一个部分，即使它是相同的，它也会添加另一个 setInterval。

当我点击起居室上的 .close 按钮以停止后台运行中的 pull_light_status 并且在加载房间时只加载一个时，我想要什么。

不知道我解释的对不对。我的编码能力不是很好所以代码可能会很乱和重复，我正在学习过程中

亲切的问候，

Answer 1

使用setInterval后可以使用clearInterval停止

var pullInterval = setInterval(fn, 10000);

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

在任何时候，如果您想重新开始间隔，只需再次使用 setInterval。

Answer 2

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

Answer 3

创建一个可以存储您的计时器引用的全局变量，然后在关闭按钮单击事件中执行 clearinterval。

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

为什么不将关闭按钮保留在客厅事件之外？

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

停止 JavaScript 间隔

Stop JavaScript Interval

javascript

setinterval