Question

我有一个autorefresh函数，如果选中了复选框并单击了一个按钮，则会调用该函数。它从php文件中自动恢复表，其中某些变量绑定到该按钮。当单击另一个按钮（绑定了不同的变量）时，必须停止自动刷新，即必须清除该间隔。然而，我无法开始工作，间隔只是加起来 - 旧的没有被清除 - 虽然我尝试在我的代码中的每个可能的位置调用我的clearinterval函数。

这就是我的文件编制方式：

$.ajaxSetup({
    cache: false
});

var refreshId = null;

function stopinterval() {
    clearInterval(refreshId);
    return false;
}

$(document).ready(function() {

    $("#button1").click(function(infralivefun) {
        event.preventDefault(infralivefun);

        var category_id = {};
        category_id['datumanf'] = $("#datumanf").datepicker().val();
        category_id['datumend'] = $("#datumend").datepicker().val();

        $.ajax({ 
            type: "POST",
            url: "infratestomc.php?id=" + Math.random(),
            dataType: "html",      
            data: category_id,
            success: function(response) {
                $("#resulttabelle").show().html(response);
            }
        });

        if ($('#autorefcheck').is(':checked')) {
            refreshId = setInterval(function() {
                var category_id = {};
                category_id['datumanf'] = $("#datumanf").datepicker().val();
                category_id['datumend'] = $("#datumend").datepicker().val();

                $.ajax({ 
                    type: "POST",
                    url: "infratestomc.php?id=" + Math.random(), 
                    dataType: "html",
                    data: category_id,
                    success: function(response) {
                        $("#resulttabelle").show().html(response);
                    }
                });
            }, 5000);
        }
        //trying to call the stopinterval inside the button.Click event below
        $('#button2').click(function() {
            stopinterval();
        });

        $('#button3').click(function() {
            stopinterval();
        });

        $('#autorefcheck').click(function() {
            stopinterval();
        });

    }); //end of on.click(button)


    //here I'm trying to call clearinterval outside of the button.click
    $('#button2').click(function() {
          stopinterval();
    });

    $('#button3').click(function() {
         stopinterval();
    });

    $('#autorefcheck').click(function() {
         stopinterval();
    });

}); //end of document.ready

想象一下，button2和button3只有传递给php的其他变量才有类似的化妆。如果有人能指出我正确的方向，我会非常高兴我能够在点击其他东西时彻底清除那个间隔！

Answer 1

稍微 fiddle 寻求帮助！

$.ajaxSetup({cache: false}); //Are you sure of it?

$(function(){
    var refreshId='';
    function stopinterval() {
        clearInterval(refreshId);
        return false;
    }
    $("#button1").on('click',function(infralivefun) {
        event.preventDefault(infralivefun);

        var category_id = {};
        category_id['datumanf'] = $("#datumanf").datepicker().val();
        category_id['datumend'] = $("#datumend").datepicker().val();

        $.ajax({ 
            type: "POST",
            url: "infratestomc.php?id=" + Math.random(),
            dataType: "html",      
            data: category_id,
            success: function(response) {
                $("#resulttabelle").show().html(response);
            }
        });

        if ($('#autorefcheck').is(':checked')) {
                refreshId = setInterval(function(){
                    var category_id = {};
                    category_id['datumanf'] = $("#datumanf").datepicker().val();
                    category_id['datumend'] = $("#datumend").datepicker().val();
                },5000);

                $.ajax({ 
                    type: "POST",
                    url: "infratestomc.php?id=" + Math.random(), 
                    dataType: "html",
                    data: category_id,
                    success: function(response) {
                        $("#resulttabelle").show().html(response);
                    }
                });
            }
        }
    });
    $('#button2, #button3, #autorefcheck').on('click',stopinterval);
});

Answer 2

如果您多次单击该按钮，您将有多个间隔在运行，因为您从未检查它是否正在运行。

if ($('#autorefcheck').is(':checked')) {
    stopinterval(); //cancel it if it is already set
    refreshId = setInterval(function() {
        ...

在其他点击事件中添加点击事件也是一个坏主意。因为每次点击，您都会向其他元素添加多个点击处理程序。

Answer 3

我不确定这是否是您问题的根源，但这肯定是一个可能的问题：您有一个包含区间ID的全局变量。假设用户点击按钮1;存储refreshID以便稍后清除它。然后用户再次点击按钮1（或实际上是另一个按钮），refreshId获得另一个（不同的）值。所以你永远无法清除第一个。

避免这种情况的最简单方法是尝试在每次setInterval()调用之前清除间隔：

stopinterval();
refreshId = setInterval(...)

通常，将每个新间隔存储在不同的变量中可能是个好主意，可能在全局可访问的对象中，以便您可以根据需要管理ID。类似的东西：

myIntervals.push({"button1": setInterval(...)});

jQuery clearinterval没有工作/没有清除所有事件的间隔

3 个答案: