Pausing JavaScript Timers

by Curtiss   |   last updated December 11, 2024   |   Javascript Tutorials ·

JavaScript Timers

All over the Web, you’ll find tutorials explaining how to use the setTimeout() method in JavaScript to set up a timer and using clearTimeout() to cancel that timer.

Unfortunately, it’s a little more difficult to find information about pausing and resuming those timers.

You could, of course, cancel the timer and start it all over again; which is probably fine if you’re using timers of short durations. However, if you’ve got a 30-second timer or something, you probably don’t want it to start all over again if someone pauses it at the 29-second mark.

There is a way to pause and resume those timers, though.

In order to do so, you need to set a variable to capture the timestamp when the timer begins. Then, when you pause the timer, you need to figure out how much time has passed between the start of the timer and now.

Once you resume the timer, you’ll simply pass the amount of time that was left to the new timer.

Following is some code you can use as an example:

  var t = null; /* Our timeout ID */
	var startTimeout = new Date(); /* When the timer starts */
	var timeLeft = 0; /* How much time is left */
	var timeDelay = 10000; /* How long the timer should be */

	function startTimer() {
		/* Replace the "alert" below with the actual code
		   that should be executed at the end of the timer */
		alert( 'You reached the end of your time limit' );

		/* Figure out when you're starting the new timer */
		startTimeout = new Date();

		/* Set the timer to perform the action again */
		t = setTimeout( startTimer, timeDelay );
	}
	function pauseTimeout() {
		/* Instantiate the timeLeft variable to be the same as
		   the amount of time the timer initially had */
		timeLeft = timeDelay;

		/* Subtract the timestamp at which the timer started from
		   the current time, then subtract that amount of milliseconds
		   from the initial amount of time the timer should have run */
		timeLeft -= new Date() - startTimeout;

		/* Clear the timer */
		clearTimeout( t );
	}
	function resumeTimeout() {
		/* If the timeLeft variable is empty or doesn't exist,
		   we simply set it to the timeDelay var */
		if( !timeLeft ) { timeLeft = timeDelay; }

		/* Start the timer again, this time using the timeLeft
		   variable instead of the timeDelay variable */
		t = setTimeout( fadeNext, timeLeft );
	}

Normally, you would invoke the startTimer() function from an initial setTimeout() call.

Then, you might add the pauseTimeout() function as the onMouseOver event for an item and add the resumeTimeout() function as the onMouseOut event.