fixed issue where calling update in callback caused infinite rAF

Author: inorganik

countUp.js

@@ -41,7 +41,7 @@ var CountUp = function(target, startVal, endVal, decimals, duration, options) {
 	}
 
 	var self = this;
-    self.version = function () { return '1.8.4'; };
+    self.version = function () { return '1.8.5'; };
 
 	function formatNumber(num) {
 		num = num.toFixed(self.decimals);
@@ -204,6 +204,7 @@ var CountUp = function(target, startVal, endVal, decimals, duration, options) {
 	// pass a new endVal and start animation
 	self.update = function (newEndVal) {
 		if (!self.initialize()) return;
+		if (newEndVal === self.frameVal) return;
 		cancelAnimationFrame(self.rAF);
 		self.paused = false;
 		delete self.startTime;

dist/countUp.js

@@ -52,7 +52,7 @@ var CountUp = function(target, startVal, endVal, decimals, duration, options) {
 	}
 
 	var self = this;
-    self.version = function () { return '1.8.4'; };
+    self.version = function () { return '1.8.5'; };
 
 	function formatNumber(num) {
 		num = num.toFixed(self.decimals);
@@ -215,6 +215,7 @@ var CountUp = function(target, startVal, endVal, decimals, duration, options) {
 	// pass a new endVal and start animation
 	self.update = function (newEndVal) {
 		if (!self.initialize()) return;
+		if (newEndVal === self.frameVal) return;
 		cancelAnimationFrame(self.rAF);
 		self.paused = false;
 		delete self.startTime;

dist/countUp.min.js

@@ -147,18 +147,11 @@ <h4 class="inlineLeft noMargin weight300">Custom easing:</h4>
 
     // set CountUp options
     // you don't need to do this - you can use the default options
-    var demo, code, data, stars, easingFunctions,
+    var demo, options, code, data, stars, easingFunctions,
         useOnComplete = false,
         useEasing = true,
         easingFn = null,
-        useGrouping = true,
-        options = {
-            useEasing : useEasing, // toggle easing
-            easingFn : easingFn, // defaults to easeOutExpo, but you can specify your own
-            useGrouping : useGrouping, // 1,000,000 vs 1000000
-            separator : ',', // character to use as a separator
-            decimal : '.', // character to use as a decimal
-        };
+        useGrouping = true;
 
     window.onload = function() {
         // in case we're testing angular
@@ -233,10 +226,10 @@ <h4 class="inlineLeft noMargin weight300">Custom easing:</h4>
             easingFn : typeof easingFn === 'undefined' ? null : easingFn,
             useGrouping : useGrouping,
             separator : document.getElementById("separator").value,
-            decimal : document.getElementById("decimal").value,
-            prefix: prefix,
-            suffix: suffix
+            decimal : document.getElementById("decimal").value
         };
+        if (prefix.length) options.prefix = prefix;
+        if (suffix.length) options.suffix = suffix;
 
         // you don't have to create a new instance of CountUp every time you start an animation,
         // you can just change the properties individually. But I do here in case user changes values in demo.
@@ -308,17 +301,15 @@ <h4 class="inlineLeft noMargin weight300">Custom easing:</h4>
         startVal = Number(startVal.replace(',','').replace(' ',''));
         var endVal = document.getElementById("endVal").value;
         endVal = Number(endVal.replace(',','').replace(' ',''));
-        var decimals = document.getElementById("decimals").value;
-        var duration = document.getElementById("duration").value;
-        var separator = document.getElementById("separator").value;
-        var decimal = document.getElementById("decimal").value;
-        var prefix = document.getElementById("prefix").value;
-        var suffix = document.getElementById("suffix").value;
-
-        var easingFn = getEasingFn();
-        var easingFnBody = getEasingFnBody(easingFn);
-
-        var code = '';
+        var decimals = document.getElementById("decimals").value,
+            duration = document.getElementById("duration").value,
+            separator = document.getElementById("separator").value,
+            decimal = document.getElementById("decimal").value,
+            prefix = document.getElementById("prefix").value,
+            suffix = document.getElementById("suffix").value,
+            easingFn = getEasingFn(),
+            easingFnBody = getEasingFnBody(easingFn),
+            code = '';
 
         if (useEasing && easingFn) {
             code += 'var easingFn = ';
@@ -335,8 +326,8 @@ <h4 class="inlineLeft noMargin weight300">Custom easing:</h4>
         code += (useGrouping) ? '&emsp;&emsp;useGrouping : true, <br>' : '&emsp;&emsp;useGrouping : false, <br>';
         code += '&emsp;&emsp;separator : \''+separator+'\', <br>';
         code += '&emsp;&emsp;decimal : \''+decimal+'\', <br>';
-        code += '&emsp;&emsp;prefix : \''+prefix+'\', <br>';
-        code += '&emsp;&emsp;suffix : \''+suffix+'\' <br>';
+        if (prefix.length) code += '&emsp;&emsp;prefix : \''+prefix+'\', <br>';
+        if (suffix.length) code += '&emsp;&emsp;suffix : \''+suffix+'\' <br>';
         code += '};<br>';
         code += 'var demo = new CountUp("myTargetElement", '+startVal+', '+endVal+', '+decimals+', '+duration+', options);<br>';
         if (useOnComplete) {

index.html

@@ -1,7 +1,7 @@
 {
   "name": "countup.js",
   "description": "Animates a numerical value by counting to it",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "license": "MIT",
   "main": "./dist/countUp.min.js",
   "repository": {