I want to stop this interval in the error
handler from running repeatedly. Is that possible, and if so, how?
// example code
$(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
}
});
}
This question is related to
javascript
jquery
html
setinterval
Use a variable and call clearInterval
to stop it.
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);
}
});
}
USE this i hope help you
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");
var flasher_icon = function (obj) {_x000D_
var classToToggle = obj.classToToggle;_x000D_
var elem = obj.targetElem;_x000D_
var oneTime = obj.speed;_x000D_
var halfFlash = oneTime / 2;_x000D_
var totalTime = obj.flashingTimes * oneTime;_x000D_
_x000D_
var interval = setInterval(function(){_x000D_
elem.addClass(classToToggle);_x000D_
setTimeout(function() {_x000D_
elem.removeClass(classToToggle);_x000D_
}, halfFlash);_x000D_
}, oneTime);_x000D_
_x000D_
setTimeout(function() {_x000D_
clearInterval(interval);_x000D_
}, totalTime);_x000D_
};_x000D_
_x000D_
flasher_icon({_x000D_
targetElem: $('#icon-step-1-v1'),_x000D_
flashingTimes: 3,_x000D_
classToToggle: 'flasher_icon',_x000D_
speed: 500_x000D_
});
_x000D_
.steps-icon{_x000D_
background: #d8d8d8;_x000D_
color: #000;_x000D_
font-size: 55px;_x000D_
padding: 15px;_x000D_
border-radius: 50%;_x000D_
margin: 5px;_x000D_
cursor: pointer;_x000D_
}_x000D_
.flasher_icon{_x000D_
color: #fff;_x000D_
background: #820000 !important;_x000D_
padding-bottom: 15px !important;_x000D_
padding-top: 15px !important;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> _x000D_
_x000D_
<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>
_x000D_
we can easily stop the set interval by calling clear interval
var count = 0 , i = 5;
var vary = function intervalFunc() {
count++;
console.log(count);
console.log('hello boy');
if (count == 10) {
clearInterval(this);
}
}
setInterval(vary, 1500);
You have to assign the returned value of the setInterval
function to a variable
var interval;
$(document).on('ready',function(){
interval = setInterval(updateDiv,3000);
});
and then use clearInterval(interval)
to clear it again.
Source: Stackoverflow.com