javascript - 为什么 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 秒时，似乎开始同时做两次事情，然后是三次，依此类推!好像如果我每秒改变一下间隔，就会跑得越来越快。有什么问题吗？

Answer 1

问题出在这里:

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

您正在新的函数作用域中创建一个变量 check，该变量在该作用域之外无法访问。 Microsoft有一个关于 javascript 范围的很好的例子。此外，您还可以看到this question .

现在要解决您的问题，您需要将 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 变量，并在清除超时时按预期工作。