Fix callback execution order for regressive countdowns

dist/timer.jquery.js

@@ -1,13 +1,14 @@
-/*! timer.jquery 0.7.1 2017-09-27*/
-(function($) {
+/*! timer.jquery 0.9.2 2024-12-13*/
+(function($) {
 var Constants = {
 	PLUGIN_NAME: 'timer',
 	TIMER_RUNNING: 'running',
 	TIMER_PAUSED: 'paused',
+	TIMER_STOPPED: 'stopped',
 	TIMER_REMOVED: 'removed',
 	DAYINSECONDS: 86400
 };
-
+
 /* global Constants:true */
 /**
  * Private
@@ -62,7 +63,7 @@ function getDefaultConfig() {
 		repeat: false,				// This will repeat callback every n times duration is elapsed
 		countdown: false,			// If true, this will render the timer as a countdown (must have duration)
 		format: null,				// This sets the format in which the time will be printed
-		updateFrequency: 500,		// How often should timer display update
+		updateFrequency: 500		// How often should timer display update
 	};
 }
 
@@ -238,28 +239,30 @@ function intervalHandler(timerInstance) {
 	if (timerInstance.config.countdown) {
 		timerInstance.totalSeconds = timerInstance.config.duration - timerInstance.totalSeconds;
 
+		timerInstance.render();
+
 		if (timerInstance.totalSeconds === 0) {
 			clearInterval(timerInstance.intervalId);
 			setState(timerInstance, Constants.TIMER_STOPPED);
 			timerInstance.config.callback();
 			$(timerInstance.element).data('seconds');
 		}
-
-		timerInstance.render();
 		return;
 	}
 
 	timerInstance.render();
-	
+
 	if (!timerInstance.config.duration) {
 		return;
 	}
 
 	// If the timer was called with a duration parameter,
 	// run the callback if duration is complete or total seconds is more than duration
 	// and remove the duration if `repeat` is not requested
+
 	if (timerInstance.totalSeconds > 0 &&
-		(timerInstance.totalSeconds % timerInstance.config.duration === 0 || timerInstance.totalSeconds > timerInstance.config.duration )) {
+		(timerInstance.totalSeconds % timerInstance.config.duration === 0 ||
+			timerInstance.totalSeconds > timerInstance.config.duration )) {
 		if (timerInstance.config.callback) {
 			timerInstance.config.callback();
 		}
@@ -283,7 +286,7 @@ var utils = {
 	makeEditable: makeEditable,
 	intervalHandler: intervalHandler
 };
-
+
 /**
  * Timer function to initiate a timer on the provided element with the given config.
  * @param  {Object} element HTML node as passed by jQuery
@@ -294,7 +297,7 @@ function Timer(element, config) {
 	this.originalConfig = $.extend({}, config);
 	this.totalSeconds = 0;
 	this.intervalId = null;
-	
+
 	// A HTML element will have the html() method in jQuery to inject content,
 	this.html = 'html';
 	if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
@@ -346,7 +349,9 @@ function Timer(element, config) {
 Timer.prototype.start = function() {
 	if (this.state !== Constants.TIMER_RUNNING) {
 		utils.setState(this, Constants.TIMER_RUNNING);
-		this.render();
+		if (this.config.hidden !== true) {
+			this.render();
+		}
 		this.intervalId = setInterval(utils.intervalHandler.bind(null, this), this.config.updateFrequency);
 	}
 };
@@ -391,7 +396,7 @@ Timer.prototype.render = function() {
 	}
 	$(this.element).data('seconds', this.totalSeconds);
 };
-
+
 /* global $:true */
 $.fn.timer = function(options) {
 	options = options || 'start';
@@ -425,4 +430,4 @@ $.fn.timer = function(options) {
 		}
 	});
 };
-} (jQuery));
+} (jQuery));

package.json

@@ -2,16 +2,16 @@
   "name": "timer.jquery",
   "description": "Start/Stop/Resume/Remove a pretty timer inside any HTML element.",
   "author": "Walmik Deshpande",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "repository": {
     "type": "git",
     "url": "git://github.com/walmik/timer.jquery.git"
   },
   "scripts": {
-    "test": "./node_modules/.bin/tape ./test/utils-test.js",
-    "build": "./node_modules/.bin/grunt",
-    "watch": "./node_modules/.bin/grunt watch",
-    "karma": "./node_modules/.bin/karma start"
+    "test": "npx tape ./test/utils-test.js",
+    "build": "npx grunt",
+    "watch": "npx grunt watch",
+    "karma": "npx karma start"
   },
   "engines": {
     "node": "> 0.10.0"

src/Timer.js

@@ -8,7 +8,7 @@ function Timer(element, config) {
 	this.originalConfig = $.extend({}, config);
 	this.totalSeconds = 0;
 	this.intervalId = null;
-	
+
 	// A HTML element will have the html() method in jQuery to inject content,
 	this.html = 'html';
 	if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {

src/utils.js

@@ -52,7 +52,7 @@ function getDefaultConfig() {
 		repeat: false,				// This will repeat callback every n times duration is elapsed
 		countdown: false,			// If true, this will render the timer as a countdown (must have duration)
 		format: null,				// This sets the format in which the time will be printed
-		updateFrequency: 500,		// How often should timer display update
+		updateFrequency: 500		// How often should timer display update
 	};
 }
 
@@ -227,30 +227,31 @@ function intervalHandler(timerInstance) {
 
 	if (timerInstance.config.countdown) {
 		timerInstance.totalSeconds = timerInstance.config.duration - timerInstance.totalSeconds;
-
+
+		timerInstance.render();
+
 		if (timerInstance.totalSeconds === 0) {
 			clearInterval(timerInstance.intervalId);
 			setState(timerInstance, Constants.TIMER_STOPPED);
 			timerInstance.config.callback();
 			$(timerInstance.element).data('seconds');
 		}
-
-		timerInstance.render();
 		return;
 	}
 
 	timerInstance.render();
-	
+
 	if (!timerInstance.config.duration) {
 		return;
 	}
 
 	// If the timer was called with a duration parameter,
 	// run the callback if duration is complete or total seconds is more than duration
 	// and remove the duration if `repeat` is not requested
-	
+
 	if (timerInstance.totalSeconds > 0 &&
-		(timerInstance.totalSeconds % timerInstance.config.duration === 0 || timerInstance.totalSeconds > timerInstance.config.duration )) {
+		(timerInstance.totalSeconds % timerInstance.config.duration === 0 ||
+			timerInstance.totalSeconds > timerInstance.config.duration )) {
 		if (timerInstance.config.callback) {
 			timerInstance.config.callback();
 		}