Fernando Urban Fernando Urban - 2 months ago 7
HTML Question

Why my setInterval function does'nt stop and increased instead of reset?

Goodnight everyone. I have the following problem: I'm trying to clean the time that start in the begining each 15 seconds.

Within her command to call a function that executes an AJAX request. The show as follows:

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


So. 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. Thank you for your time and I really hope you can help me.

Answer

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.