throttle animation ticks

src/effects.js

@@ -13,7 +13,7 @@ var elemdisplay = {},
 		// opacity animations
 		[ "opacity" ]
 	],
-	fxNow,
+	fxNow, ticks = 0,
 	requestAnimationFrame = window.webkitRequestAnimationFrame ||
 		window.mozRequestAnimationFrame ||
 		window.oRequestAnimationFrame;
@@ -421,7 +421,7 @@ jQuery.fx.prototype = {
 				};
 				requestAnimationFrame( raf );
 			} else {
-				timerId = setInterval( fx.tick, fx.interval );
+				timerId = setInterval( fx.tick, 16 );
 			}
 		}
 	},
@@ -521,18 +521,20 @@ jQuery.fx.prototype = {
 
 jQuery.extend( jQuery.fx, {
 	tick: function() {
-		for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) {
-			if ( !timers[i]() ) {
-				timers.splice(i--, 1);
-			}
-		}
+		if ( this.throttle == 1 || ++ticks >= this.throttle && !( ticks = 0 ) ) {
+			for ( var timers = jQuery.timers, i = 0 ; i < timers.length ; ++i ) {
+				if ( !timers[i]() ) {
+					timers.splice(i--, 1);
+				}
 
-		if ( !timers.length ) {
-			jQuery.fx.stop();
+				if ( !timers.length ) {
+					jQuery.fx.stop();
+				}
+			}
 		}
 	},
 
-	interval: 13,
+	throttle: 1,
 
 	stop: function() {
 		clearInterval( timerId );

test/unit/effects.js

@@ -1045,3 +1045,27 @@ test("callbacks should fire in correct order (#9100)", function() {
 				}
 			});
 });
+
+test("throttle animation ticks (#9384)", function() {
+	stop();
+	var ticks = 0,
+		obj = { test: 0 };
+
+	jQuery.fx.throttle = 2;
+	jQuery(obj).animate({test: 100}, {
+		step: function() {
+			ticks++;
+		},
+		duration: 1000,
+		complete: function() {
+			ok( ticks > 0, "When throttle value is != 1, animation still runs" );
+			// When throttle value is 1 (no throttling), there should be 60 ticks per second.
+			// A throttle value of 2 means 60fps/2, 3 is 60fps/3, ...
+			// The exact number of ticks per second isn't predictable.
+			// Here we just make sure that there will be less than 35 ticks in one second.
+			ok( ticks < 35, "When throttle value is 2, animation is running at ~30fps" );
+
+			start();
+		}
+	});
+});