Best IT Recipes

Stop setInterval

I want to stop this interval in the error handler from restarting. Is it possible, and if so, how?

 $(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 } }); }
+57
javascript jquery html setinterval
May 08 '13 at 9:31
source share
5 answers

You need to set the setInterval return value for the variable within the scope of the click handler, and then use clearInterval() as follows:

 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>'); } }); }
+134
May 08 '13 at 9:33
source share

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); } }); }
+15
May 08 '13 at 9:33
source share

You must assign the return value of the setInterval function setInterval variable

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

and then use clearInterval(interval) to clear it again.

+8
May 08 '13 at 9:34
source share

USE it, I hope it helps 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");
+5
Feb 01 '14 at 10:16
source share

 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>
-one
Dec 11 '17 at 2:53 on
source share


More articles:


All Articles