jQuery clearinterval 不起作用/不清除所有事件的间隔

Question

我有一个自动刷新功能，如果选中一个复选框并单击一个按钮，该功能就会被调用。它会从 php 文件中自动刷新 table，并将某些变量绑定到该按钮。单击另一个按钮（绑定了不同的变量）时，自动刷新必须停止，即必须清除间隔。但是我无法开始工作，间隔只是加起来 - 旧的没有被清除 - 尽管我尝试在我的代码中几乎每个可能的地方调用我的 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 不起作用/不清除所有事件的间隔

jQuery clearinterval doesn't work / doesn't clear the interval across all events

variables

ajax

jquery

setinterval

clearinterval