为什么setInterval函数不停止？

Question

我正在尝试清除每15秒运行一次的时间间隔。

这是ajax请求：

function extras()
{
    $x = {
        action:'extras'
    }; 
    var r;
    $.ajax({
        type:'POST',
        url:'services.php',
        data:$x,
        beforeSend:function() {
            $('input[name="stop_"]').trigger("click");
        },
        success:function(response) {
            r = response;   
            //console.log(response)
        },
        complete:function() {
            console.log(r);                 
            $('input[name="re_start"]').trigger("click");
        }
    }); 
}

因此，在我的按钮re_start和stop_我有：

$('input[name="re_start"]').click(function (event) {
    event.preventDefault();
    clearInterval(check);
    var check = setInterval(function() {
        extras();
    },15000);
    console.log('Starting again...');
});

$('input[name="stop_"]').click(function (event) {
    event.preventDefault();
    clearInterval(check);
    console.log('Stop');
});

在jQuery的DOM中，我初始化函数extras()并将其保存在名为“ check”的变量中，在该变量中，我初始化时间间隔如下：

<input type="button" style="display:none;" name="re_start">
<input type="button" style="display:none;" name="stop_">

<script type="text/javascript">
    (function() {
        extras();
        var check = setInterval(function() {
            extras();
        },15000);   
    })();
    function extras()
    {
        $x = {
            action:'extras'
        }; 
        var r;
        $.ajax({
            type:'POST',
            url:'services.php',
            data:$x,
            beforeSend:function() {
                $('input[name="stop_"]').trigger("click");
            },
            success:function(response) {
                r = response;   
                //console.log(response)
            },
            complete:function() {
                console.log(r);
                //message_smart(r);                     
                $('input[name="re_start"]').trigger("click");
            }
        }); 
    }   
</script>

然后我不明白前30秒如何工作，以及当他们经过60秒后似乎开始一次执行两次，然后开始执行3次，等等！ 似乎如果我每秒更改一次间隔，它将运行得越来越快。 问题是什么？

Answer 1

问题在这里：

(function() {
    extras();
    var check = setInterval(function() {
        extras();
    },15000);   
})();

您正在新功能范围内创建变量check ，而该功能范围在该范围之外不可访问。 Microsoft在javascript中有一个很好的作用域示例。 此外，您可以看到此问题 。

现在要解决您的问题，您需要将check变量放在全局范围内，因此删除函数包装器。

extras();
var check = setInterval(function() {
    extras();
},15000);  

您还需要更改重新启动处理程序以重新分配变量，如下所示：

$('input[name="re_start"]').click(function (event) {
    event.preventDefault();
    clearInterval(check);
    check = setInterval(function() {
        extras();
    },15000);
    console.log('Starting again...');
});

现在，它们都应使用相同的check变量，并在清除超时时按预期工作。