Using SetTimeout to Make a jQuery Timer

This example shows a jQuery countdown where the numbers count down from 10 every second. This is done by decrementing the counter number and then calling setTimeout again at the end of the timeout function call. Here’s the code.

jQuery Code

jQuery(document).ready(function () {

	var countdown;
	var countdown_number;

	function countdown_init() {
		countdown_number = 11;
		countdown_trigger();
	}

	function countdown_trigger() {
		if(countdown_number > 0) {
			countdown_number--;
			$('countdown_text').innerHTML = countdown_number;
			if(countdown_number > 0) {
				countdown = setTimeout('countdown_trigger()', 1000);
			}
		}
	}

	function countdown_clear() {
		clearTimeout(countdown);
	}
	
});

HTML Code


    
    

Placeholding text

Frequently Asked Questions about jQuery Timer

How can I create a countdown timer using jQuery?

Creating a countdown timer using jQuery involves using the setInterval function. This function allows you to execute a function repeatedly after a specified interval. Here’s a simple example:

var count = 10; //10 seconds countdown
var counter = setInterval(timer, 1000); //1000 will run it every 1 second

function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML = count + " secs"; // watch for spelling
}
In this example, the setInterval function is set to run the timer function every 1 second (1000 milliseconds). The timer function decreases the count variable by 1 each time it runs, and updates the HTML element with id “timer” to display the current count. When the count reaches 0, the clearInterval function stops the timer.

How can I pause a timer in jQuery?

Pausing a timer in jQuery can be achieved by using the clearInterval function. This function stops the timer that was previously set with setInterval. Here’s an example:

var count = 10;
var counter = setInterval(timer, 1000);

function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML = count + " secs";
}

// To pause the timer
function pauseTimer() {
clearInterval(counter);
}
In this example, calling the pauseTimer function will stop the timer.

How can I resume a paused timer in jQuery?

Resuming a paused timer in jQuery can be a bit tricky because JavaScript doesn’t have a built-in function to resume a timer. However, you can achieve this by creating a new timer when you want to resume. Here’s an example:

var count = 10;
var counter = setInterval(timer, 1000);

function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML = count + " secs";
}

// To pause the timer
function pauseTimer() {
clearInterval(counter);
}

// To resume the timer
function resumeTimer() {
counter = setInterval(timer, 1000);
}
In this example, calling the resumeTimer function will start a new timer, continuing from where the last timer left off.

How can I create a timer that executes a function after a delay in jQuery?

jQuery provides the delay function that can be used to create a delay before executing a function. Here’s an example:

$( "#myDiv" ).delay( 2000 ).fadeIn( 400 );
In this example, the fadeIn function will be executed after a delay of 2 seconds (2000 milliseconds). The fadeIn function will make the HTML element with id “myDiv” fade in over a period of 0.4 seconds (400 milliseconds).

How can I create a repeating timer in jQuery?

Creating a repeating timer in jQuery can be achieved by using the setInterval function. This function allows you to execute a function repeatedly after a specified interval. Here’s an example:

setInterval(function() {
alert("Hello");
}, 3000);
In this example, the alert function will be executed every 3 seconds (3000 milliseconds). The alert function will display a popup message saying “Hello”.