Added performance.now() and canceled rAF after stop()

js/sketch.js

@@ -155,8 +155,9 @@
 
   function constructor( context ) {
 
-    var request, handler, target, parent, bounds, index, suffix, clock, node, copy, type, key, val, min, max, w, h;
-
+    var request, handler, target, parent, bounds, index, suffix, node, copy, type, key, val, min, max, w, h;
+
+    var before = 0;    
     var counter = 0;
     var touches = [];
     var resized = false;
@@ -219,27 +220,24 @@
       }
     }
 
-    function update() {
+    function update( now ) {
 
       cAF( request );
       request = rAF( update );
 
-      if ( !setup ) {
-
-        trigger( context.setup );
-        setup = isFunction( context.setup );
-      }
-
       if ( !resized ) {
         trigger( context.resize );
         resized = isFunction( context.resize );
       }
 
+      if ( !setup ) triggerSetup();
+
       if ( context.running && !counter ) {
 
-        context.dt = ( clock = +new Date() ) - context.now;
+        context.dt = (!before) ? 0 : window.performance.now() - before;
         context.millis += context.dt;
-        context.now = clock;
+        before = now;
+        context.now = now;
 
         trigger( context.update );
 
@@ -412,16 +410,45 @@
       trigger( context[ event.type ], event );
     }
 
+    function triggerSetup() {
+
+      trigger( context.setup );
+      setup = isFunction( context.setup );
+    }
+
+    function init() {
+
+      context.st = window.performance.now();
+
+      bind( true );
+
+      triggerSetup();
+
+      resize();
+
+      if (context.autostart) start();      
+    }
+
     // Public API
 
     function start() {
+
+      if ( context.running ) return;
 
-      context.now = +new Date();
       context.running = true;
+
+      request = rAF( update );
     }
 
     function stop() {
 
+      if ( !context.running ) return;
+
+      cAF( request );
+
+      before = 0;
+      context.dt = -1;
+      context.now = -1;
       context.running = false;
     }
 
@@ -458,8 +485,8 @@
       dragging: false,
       running: false,
       millis: 0,
-      now: NaN,
-      dt: NaN,
+      now: -1,
+      dt: -1,
 
       destroy: destroy,
       toggle: toggle,
@@ -470,7 +497,9 @@
 
     instances.push( context );
 
-    return ( context.autostart && start(), bind( true ), resize(), update(), context );
+    init();
+
+    return context;
   }
 
   /*

tests/spec/sketch.js

@@ -310,7 +310,9 @@ describe( 'setup and teardown', function() {
         for ( var i = 0; i < 100; i++ ) sketch.start();
 
         expect( setups ).toBe( 1 );
-        expect( updates ).toBe( 1 );
+        if (sketch.millis === 0) {
+            expect( updates ).toBe( 0 );
+        }
 
         waitsFor( function() { return updates > 1; }, 'Update failed', 10000 );
 
@@ -373,22 +375,16 @@ describe( 'setup and teardown', function() {
             update: function() { updates++; }
         });
 
-        waitsFor( function() { return updates > 0; }, 'Update failed', 10000 );
+        waitsFor( function() { return updates > 1; }, 'Update failed', 10000 );
 
         runs( sketch.stop );
 
         runs( function() {
-            expect( updates ).toBe( 1 );
+            expect( updates ).toBeGreaterThan( 1 );
         });
 
         runs( sketch.start );
 
-        waitsFor( function() { return updates > 1; }, 'Update failed', 10000 );
-
-        runs( function() {
-            expect( updates ).toBeGreaterThan( 1 );
-        });
-
         runs( function() {
             count = updates;
             sketch.toggle();
@@ -413,46 +409,69 @@ describe( 'setup and teardown', function() {
 
     it( 'clock is working', function() {
 
-        var clock = +new Date();
+        var startTime = -1;
+        var before = 0;
         var millis = 0;
         var MOE = 5;
 
         sketch = Sketch.create({
+            setup: function() {
+                expect( this.st ).toBeGreaterThan( 0 );
+                startTime = this.st;                
+            },
             update: function() {
 
-                var now = +new Date();
-                var dt = now - clock;
+                var now = window.performance.now();
+                var dt = (!before) ? 0 : now - before;
                 millis += dt;
 
+                expect( Math.abs( this.st ) ).toBe( startTime );
                 expect( Math.abs( this.millis - millis ) ).toBeLessThan( MOE );
                 expect( Math.abs( this.now - now ) ).toBeLessThan( MOE );
                 expect( Math.abs( this.dt - dt ) ).toBeLessThan( MOE );
 
-                clock = now;
+                before = now;
             }
         });
 
         waits( 1000 );
     });
 
-    // delta times ok after stop/start
+    // clock ok after stop/start
 
-    it( 'delta times ok after stop/start', function() {
+    it( 'clock ok after stop/start', function() {
 
         var updates = 0;
+        var previousMillis = 0;
+        var startTime = 0;
 
         sketch = Sketch.create({
             update: function() {
                 updates++;
             }
         });
 
-        waitsFor( function() { return updates > 1; }, 'Update never fired', 1000 );
+        expect( sketch.st ).toBeGreaterThan( 0 );
+        startTime = sketch.st;
+
+        waitsFor( function() { return updates > 1 && updates <= 3; }, 'Update never fired', 1000 );
         runs( sketch.stop );
         waits( 500 );
+        runs(function() {
+            expect( sketch.st ).toBe( startTime );
+            expect( sketch.millis ).toBeGreaterThan( 0 );
+            expect( sketch.now ).toBe( -1 );
+            expect( sketch.dt ).toBe( -1 );
+            previousMillis = sketch.millis;
+        });
         runs( sketch.start );
-        waitsFor( function() { return updates > 2; }, 'Update never fired after restart', 1000 );
-        expect( sketch.dt ).toBeLessThan( 100 );
+        waitsFor( function() { return updates > 3 && updates < 6; }, 'Update never fired after restart', 1000 );
+        runs(function() {
+            expect( sketch.st ).toBe( startTime );
+            expect( sketch.millis ).toBeGreaterThan( previousMillis );
+            expect( sketch.now ).toBeGreaterThan( 0 );
+            expect( sketch.dt ).toBeLessThan( 30 );
+        });
     });
 
     // interval is working