Skip to content
jQuery Timer: Start/Stop/Resume/Remove pretty timer inside any HTML element.
JavaScript
Branch: master
Clone or download

Latest commit

mohitYogi and walmik Updated timer to support continuous run (#1) (#92)
* Updated timer to support continuous run (#1)

* Updated intervalHandler to support continuous run

intervalHandler is updated in order to support continuous timer run, even after duration is completed

* Flag for single call to callback

Flag for single call to callback when timer completes in continuous run.

* Update utils.js

* support continuous Timer run

1. Added stopTimerOnDuration in config to run timer continuously.
2. Updated intervalHandler to support continuous run
3. Added Flag isCallbackCalled to stop multiple calls to callback after reaching the duration in continuous run.

* Updates after review.

1. Removed stopTimerOnDuration flag (repeat flag do the same.)
2. Removed isCallbackCalled flag, as suggested after commit review.

* Update after Review

Removed flag isCallbackCalled. (Not required).

* Updates after review

1. Removed stopTimerOnDuration flag (repeat flag do the same.)
2. Removed isCallbackCalled flag, as suggested after commit review.

* Updates after Review

1. Removed stopTimerOnDuration flag (repeat flag do the same.)
2. Removed isCallbackCalled flag, as suggested after commit review.

* Patch version

New rule for checking timer duration completed.

* Update timer.jquery.js

* Semicolon & Comment update

Added missing semi colon. Updated Comment.

* Removed & Updated Comment
Latest commit 9b7c862 Jul 31, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Updated timer to support continuous run (#1) (#92) Jul 31, 2019
src Updated timer to support continuous run (#1) (#92) Jul 31, 2019
test Fix issue #79 & jscs Sep 27, 2017
.gitignore eof newlines May 31, 2016
.jscsrc Move to ES 5 Apr 16, 2017
.travis.yml Fix test target Apr 16, 2017
CONTRIBUTING.md Move to ES 5 Apr 16, 2017
Gruntfile.js Fix issue #79 & jscs Sep 27, 2017
LICENSE-MIT Move to ES 5 Apr 16, 2017
README.md Adding new parameter (#85) Nov 26, 2018
bower.json Move to ES 5 Apr 16, 2017
karma.conf.js Add karma tests Apr 16, 2017
package.json Updated timer to support continuous run (#1) (#92) Jul 31, 2019

README.md

jQuery Timer plugin

  • Lightweight, well tested Build Status jQuery pretty timer plugin
  • Start, Pause, Resume and Remove a timer inside any HTML element.
  • Get notified after specific time or at regular intervals.
  • Click and edit time while timer is running!
  • Enable multiple timers on the same page.

Demo & Instructions | Download

Getting started

Load the plugin in a script tag (right after loading jQuery) directly from CDNjs using this URL,

https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.7.0/timer.jquery.js

If you are using bower,

bower install timer.jquery

Alternatively you can download the jQuery timer plugin and host it relative to your HTML file. Once you have your preferred way to get jquery and the timer plugin, in your web page:

<script src="path/to/jquery.js"></script>
<script src="path/to/timer.jquery.js"></script>
<script>
(function($) {

  //start a timer
  $("#div-id").timer();

}());
</script>

Usage

To start a timer with options:

$("#div-id").timer(options);

Options for timer:

$("#div-id").timer({
	seconds:	{Int},		// The number of seconds to start the timer from
	duration: 	{String},	// The time to countdown from. `seconds` and `duration` are mutually exclusive
	callback: 	{Function},	// If duration is set, this function is called after `duration` has elapsed
	repeat: 	{Bool},		// If duration is set, `callback` will be called repeatedly
	format:		{String},	// Format to show time in
	editable:	{Bool}		// If click and edit time is enabled
	hidden;		{Bool}		// If true, the timer is not displayed in the selected item.
});

Methods available on an initialized timer:

//pause an existing timer
$("#div-id").timer('pause');

//resume a paused timer
$("#div-id").timer('resume');

//remove an existing timer
$("#div-id").timer('remove');  //leaves the display intact

//get elapsed time in seconds
$("#div-id").data('seconds');

Timed Events

Start a timer and execute a function after a certain duration. You can use this to simulate a timed event.

//start a timer & execute a function in 5 minutes & 30 seconds
$('#div-id').timer({
	duration: '5m30s',
	callback: function() {
		alert('Time up!');
	}
});

Start a timer and execute a function repeatedly at a certain duration.

//start a timer & execute a function every 2 minutes
$('#div-id').timer({
	duration: '2m',
	callback: function() {
		console.log('Why, Hello there');	//you could have a ajax call here instead
	},
	repeat: true //repeatedly calls the callback you specify
});

Start a timer and execute a function repeatedly at a certain duration and then reset the timer.

//start a timer & execute a function every 2 minutes
$('#div-id').timer({
	duration: '2m',
	callback: function() {
		$('#div-id').timer('reset');
	},
	repeat: true //repeatedly calls the callback you specify
});

Timer state

You can get the current state of timer by querying the state property on it's data object

$('#div-id').data('state'); 	// running | paused | stopped | removed
Duration Syntax

When you initialize a timer with the duration and callback parameters, the timer plugin executes the callback function at the set duration. The syntax for specifying the duration is verbose. h for hours. m for minutes and s for seconds. Here are some examples:

'3h15m'		// 3 hours, 15 minutes
'15m'		// 15 minutes
'30s'		// 30 seconds
'2m30s'		// 2 minutes 30 seconds
'2h15m30s'	// 2 hours 15 minutes and 30 seconds
Format Syntax

By default the timer displays the biggest whole unit. Examples:

  • seconds: 50 will show as 50 sec
  • seconds: 63 will show as 1:03 min
  • seconds: 3663 will show as 1:01:03

If you want to customize the format in which the timer displays time, use the format option. Available formats the timer understands are:

Format Description Example
%h Non-zero padded Hours %h hours gives 3 hours
%m Non-zero padded Minutes unless number of minutes is greater than 60 %h:%m minutes gives 0:6 minutes or 1:06 minutes
%g Non-zero padded Total Minutes Irrelative to hours %G minutes gives 75 minutes or 6 minutes
%s Non-zero padded Seconds unless number of seconds is greater than 60 %h:%m:%s gives 0:0:6 or 0:1:06 or 1:01:06
%t Non-zero padded Total Seconds Irrelative to minutes and hours %t gives 3660 or '9'
%H Zero padded Hours %H hours gives 03 hours
%M Zero padded Minutes %H:%M minutes gives 00:06 minutes
%G Zero padded Total Minutes Irrelative to hours %G minutes gives 75 minutes
%S Zero padded Seconds %H:%M:%S gives 00:00:06
%T Zero padded Total Seconds Irrelative to minutes and hours %T gives 3660

Countdown

You can use the jQuery timer plugin for countdown as well.

$('#timerDiv').timer({
    countdown: true,
    duration: '3m40s',    	// This will start the countdown from 3 mins 40 seconds
    callback: function() {	// This will execute after the duration has elapsed
    	console.log('Time up!');
    }
});
You can’t perform that action at this time.