javascript - start - Stop setInterval

stop set interval js

Question

Quiero detener este intervalo en el controlador de error no se ejecute repetidamente. Es posible, y si es así, ¿cómo?

$(document).on(''ready'',function(){
setInterval(updateDiv,3000);
});
function updateDiv(){
$.ajax({
url: ''getContent.php'',
success: function(data){
$(''.square'').html(data);
},
error: function(){
$.playSound(''oneday.wav'');
$(''.square'').html(''<span style="color:red">Connection problems</span>'');
// I want to stop it here
}
});
}

Answer 1

UTILIZA esto espero ayudarte

var interval;
function updateDiv(){
$.ajax({
url: ''getContent.php'',
success: function(data){
$(''.square'').html(data);
},
error: function(){
/* clearInterval(interval); */
stopinterval(); // stop the interval
$.playSound(''oneday.wav'');
$(''.square'').html(''<span style="color:red">Connection problems</span>'');
}
});
}
function playinterval(){
updateDiv();
interval = setInterval(function(){updateDiv();},3000);
return false;
}
function stopinterval(){
clearInterval(interval);
return false;
}
$(document)
.on(''ready'',playinterval)
.on({click:playinterval},"#playinterval")
.on({click:stopinterval},"#stopinterval");

Answer 2

Usa una variable y llama a clearInterval para detenerlo.

var interval;
$(document).on(''ready'',function()
interval = setInterval(updateDiv,3000);
});
function updateDiv(){
$.ajax({
url: ''getContent.php'',
success: function(data){
$(''.square'').html(data);
},
error: function(){
$.playSound(''oneday.wav'');
$(''.square'').html(''<span style="color:red">Connection problems</span>'');
// I want to stop it here
clearInterval(interval);
}
});
}

Answer 3

setInterval asignar el valor devuelto de la función setInterval a una variable

var interval;
$(document).on(''ready'',function(){
interval = setInterval(updateDiv,3000);
});

y luego use clearInterval(interval) para borrarlo nuevamente.

Answer 4

setInterval establecer el valor de retorno de setInterval en una variable dentro del alcance del manejador de clics, luego use clearInterval() esta manera:

var interval = null;
$(document).on(''ready'',function(){
interval = setInterval(updateDiv,3000);
});
function updateDiv(){
$.ajax({
url: ''getContent.php'',
success: function(data){
$(''.square'').html(data);
},
error: function(){
clearInterval(interval); // stop the interval
$.playSound(''oneday.wav'');
$(''.square'').html(''<span style="color:red">Connection problems</span>'');
}
});
}

Answer 5

var flasher_icon = function (obj) {
var classToToggle = obj.classToToggle;
var elem = obj.targetElem;
var oneTime = obj.speed;
var halfFlash = oneTime / 2;
var totalTime = obj.flashingTimes * oneTime;
var interval = setInterval(function(){
elem.addClass(classToToggle);
setTimeout(function() {
elem.removeClass(classToToggle);
}, halfFlash);
}, oneTime);
setTimeout(function() {
clearInterval(interval);
}, totalTime);
};
flasher_icon({
targetElem: $(''#icon-step-1-v1''),
flashingTimes: 3,
classToToggle: ''flasher_icon'',
speed: 500
});

.steps-icon{
background: #d8d8d8;
color: #000;
font-size: 55px;
padding: 15px;
border-radius: 50%;
margin: 5px;
cursor: pointer;
}
.flasher_icon{
color: #fff;
background: #820000 !important;
padding-bottom: 15px !important;
padding-top: 15px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="steps-icon material-icons active" id="icon-step-1-v1" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Origin Airport">alarm</i>