How to pause and resume jquery interval


I have made a custom slider with jQuery. For this I have used setInterval function:

timer = setInterval(function() {}, 8000);

But I cannot pause and resume the interval. I have 2 buttons (play, pause) which I want to use for. Lets say I click pause after 3 sec, and then resume it. So it should stay in that slider for 5 more seconds and then go to the next one and continue 8 seconds each. I have seen this kinda slider with mouseover pause, but can't do it by myself. I have tried this:


But this seems reset the interval, don't pause. Can anyone help :)


I'm not entirely sure that's something native to jQuery, however, you could use a flag to pause it, and check in your setInterval whether to execute.

Edit: Found something that might be useful to you, <a href="https://code.google.com/p/jquery-timer/" rel="nofollow">the jquery-timer</a>

Alternitively, you can keep track of the id set by setInterval, and clear out out when you'd like to pause. Then you can set it again when you wish to resume:

var id = window.setInterval(); //create window.clearInterval(id); //pause id = window.setInterval(); //resume


there are two ways of accomplish this:


Clearing the interval everytime you pause and starting a new interval when you resume it.

</li> <li>

Having a flag to tell the function in the interval when it is paused and it should not do anything.

</li> </ol>

The <strong>first solution</strong> would work like this:

var intervalId = false; function intervalFunction () { // do stuff. } startButton.onclick = function () { if (intervalId === false) { intervalId = setInterval(intervalFunction, 8000); } } pauseButton.onclick = function () { if (intervalId !== false) { clearInterval(intervalFunction); intervalId = false; } } // auto start it: intervalId = setInterval(intervalId);

The <strong>second solution</strong> would work like this:

var isRunning = true; var interval = setInterval(function() { if (!isRunning) { // not running, do nothing } else { // it is running, do stuff. } }, 8000); pauseButton.onclick = function () { isRunning = false; }; startButton.onclick = function () { isRunning = true; };


The code looks fine.

But ... did you check if the <em>timer</em> variable is correctly set when you call the <em>clearInterval</em> function?


I am not complete sure, that what you are asking for, is the right thing you are showing us... setInterval basically is pure native javascript and in my opinion not worth using! If you wan't to set your timeouts via jquery try this link: <a href="http://jchavannes.com/jquery-timer" rel="nofollow">http://jchavannes.com/jquery-timer</a>. You can find usages there...

Now on to your problem... you need a state to check wether the slider has to slide or not... simply set a bool like this...

var timer; var doSlide = false; var i = 0; function Slide(){ timer = setTimeout(function(){ if(doSlide == true){ Slide(); i++; // Same as i = i + 1 console.log('Sliding'); if(i == 3) AbortSlide(); /* Abort on third slide! Dont use this in your logic!*/ } else if(doSlide == false){ console.log('Sliding aborted untill next RunSlide() call!') clearTimeout(timer); } },1000); } function AbortSlide(){ doSlide = false; i = 0; // Resetting the count! Dont use this in your logic! } function RunSlide(){ doSlide = true; Slide(); } RunSlide();

You could also empty the interval in the abort method:

function AbortSlide(){ doSlide = false; clearTimeout(timer); i = 0; // Resetting the count! Dont use this in your logic! }

Here is a working fiddle i made for you to understand what timers and intervals are for: <a href="https://jsfiddle.net/q5qzmv68/7/" rel="nofollow">https://jsfiddle.net/q5qzmv68/7/</a>

Hope this helps! Cheers!


  • DialogEx with Controls: Resizing?
  • How to set full width and height for chrome new window
  • Appcelerator: Android Window not full screen with top and bottom ~2% still showing the splash screen
  • Orientation Portrait and PortraitUpSideDown Only For One Window
  • Android EditText change focus after validation and showing the error in a Dialog
  • how to use the same method of jquery scrollTop with css3
  • Why isn't my mobile website auto-resizing for mobile devices?
  • C#, Updating a Progress Bar Using Background Worker From a Different Class
  • How to reduce the time delay to reach run method of Runnable class using ExecutorService Java
  • Persistent stty Settings?
  • Can my PDF ping my server when it is opened?
  • Two Tables Serving as one Model in Rails
  • Clear fused location provider's location for testing
  • Approximate Order-Preserving Huffman Code
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • Tamper-proof configuration files in .NET?
  • Assign variable to the value in HTML
  • How to use carriage return with multiple line?
  • Incrementing object id automatically JS constructor (static method and variable)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Perl system calls when running as another user using sudo
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • Javascript + PHP Encryption with pidCrypt
  • jquery mobile loadPage not working
  • WOWZA + RTMP + HTML5 Playback?
  • SVN: Merging two branches together
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • How does Linux kernel interrupt the application?
  • Qt: Run a script BEFORE make
  • reshape alternating columns in less time and using less memory
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?