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

【问题标题】：jQuery clearinterval doesn't work / doesn't clear the interval across all eventsjQuery clearinterval 不起作用/不清除所有事件的间隔
【发布时间】：2016-02-16 16:04:48
【问题描述】：

我有一个自动刷新功能，如果选中复选框并单击按钮，则会调用该功能。它会自动刷新 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.ini 的其他变量。如果有人能指出我在点击其他内容时如何彻底清除该间隔的正确方向，我将非常高兴！

【问题讨论】：

我不确定为什么它不起作用，但是您是否考虑过如果用户在按钮 1 上单击两次会发生什么？您将丢失对前一个间隔的引用，并且永远不会恢复。
实际上，这可能是您的问题的原因之一。您是否碰巧为其他按钮调用了相同的 setInterval 而没有先清除它？
@Aioros hm 我不太确定我是否理解，如果单击某些内容，我有点确实想丢失对先前间隔的所有引用！是的，我确实为其他按钮调用了相同的 setInterval，我认为当我单击另一个按钮时它会被清除（参见代码的最后一部分）
好的，但是你必须在setInterval()之前调用你的stopInterval()，否则refreshId会改变，你将无法清除之前设置的间隔。我不确定这是您的情况，但肯定可以通过单击按钮 1 两次来实现。
@Aioros 我很确定我错过了一些非常基本的东西。在我再次调用之前，您能否引导我正确清除间隔？

标签： jquery ajax variables setinterval clearinterval

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

一般来说，将每个新间隔存储在不同的变量中可能是个好主意，也许在全局可访问的对象中，这样您就可以根据需要管理 ID。比如：

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

【讨论】：