Why doesn't the setInterval function stop?

Question

I'm trying to clear the time interval which runs every 15 seconds.

Here is the ajax request:

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");
        }
    }); 
}

So, in my buttons re_start and stop_ i have:

$('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');
});

In my DOM in jQuery I initialize the function extras() and keep it in a variable called "check" where I initialize the time interval as follows:

<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>

Then I can not understand how it is possible that the first 30 seconds work and when they pass 60 seconds seem to start doing things twice at once, then three and so on! It seems like if I change the interval every second and will run faster and faster. What is the problem?

Thank's for answer. How do you know that? I mean, I'm restarting my setInterval when AJAX finish in the complete function and beforeSend I stop the last setInterval. — Fernando Torres, Sep 25 '16 at 02:51

score 3 · Accepted Answer · edited May 23 '17 at 10:29

The problem is here:

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

You are creating a variable check in a new function scope that is inaccessible outside of that scope. Microsoft has a good example of scope in javascript. Additionally you can see this question.

Now to solve your problem you need to put the check variable in the global scope so remove the function wrapper.

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

You also need to change the restart handler to reassign the variable, like so:

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

Now they should all be using the same check variable and work as expected when clearing the timeout.

Thank you very much. I never thought that the problem was in the global variable. My problem is solve. Greetings. — Fernando Torres, Sep 25 '16 at 03:04

Why doesn't the setInterval function stop?

1 Answers1