Add a fallback for rAF

benschwarz · Jun 21, 2014 · 635ef71 · 635ef71
1 parent dcba7fd
commit 635ef71
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 36 deletions.
diff --git a/example/metaquery.js b/example/metaquery.js
@@ -2,6 +2,7 @@
   var metaQuery = {
     breakpoints: {},
     _isTicking: false,
+    _debounceLastTime: 0,
     _namedEvents: {},
     _eventMatchCache: {},
     _globalEvents: [],
@@ -39,22 +40,6 @@
     }
   },
 
-  debounce = function( func, wait ) {
-    var args,
-        thisArg,
-        timeoutId;
-
-    function delayed() {
-      timeoutId = null;
-      func.apply( thisArg, args );
-    }
-
-    return function() {
-      window.clearTimeout( timeoutId );
-      timeoutId = window.setTimeout( delayed, wait );
-    };
-  },
-
   hasClass = function( element, className ) {
     return element.className.split(' ').indexOf( className ) !== -1;
   },
@@ -115,6 +100,19 @@
     metaQuery._isTicking = true;
   },
 
+  // A rAF fallback, adpated from https://gist.github.com/paulirish/1579671
+  requestAnimationFrame = function(callback, element) {
+    if ( !window.requestAnimationFrame ) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - metaQuery._debounceLastTime));
+      var id = window.setTimeout(function() {  callback(currTime + timeToCall); }, timeToCall);
+      metaQuery._debounceLastTime = currTime + timeToCall;
+      return id;
+    } else {
+      window.requestAnimationFrame(callback, element);
+    }
+  },
+
   // Called when a media query changes state
   mqChange = function () {
     metaQuery._isTicking = false;
@@ -175,9 +173,7 @@
   // are in the DOM.
   onDomReady = function () {
     collectMediaQueries();
-
     addEvent( window, 'resize', requestMqChange);
-
     mqChange();
   };
 

diff --git a/metaquery.js b/metaquery.js
@@ -2,6 +2,7 @@
   var metaQuery = {
     breakpoints: {},
     _isTicking: false,
+    _debounceLastTime: 0,
     _namedEvents: {},
     _eventMatchCache: {},
     _globalEvents: [],
@@ -39,22 +40,6 @@
     }
   },
 
-  debounce = function( func, wait ) {
-    var args,
-        thisArg,
-        timeoutId;
-
-    function delayed() {
-      timeoutId = null;
-      func.apply( thisArg, args );
-    }
-
-    return function() {
-      window.clearTimeout( timeoutId );
-      timeoutId = window.setTimeout( delayed, wait );
-    };
-  },
-
   hasClass = function( element, className ) {
     return element.className.split(' ').indexOf( className ) !== -1;
   },
@@ -115,6 +100,19 @@
     metaQuery._isTicking = true;
   },
 
+  // A rAF fallback, adpated from https://gist.github.com/paulirish/1579671
+  requestAnimationFrame = function(callback, element) {
+    if ( !window.requestAnimationFrame ) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - metaQuery._debounceLastTime));
+      var id = window.setTimeout(function() {  callback(currTime + timeToCall); }, timeToCall);
+      metaQuery._debounceLastTime = currTime + timeToCall;
+      return id;
+    } else {
+      window.requestAnimationFrame(callback, element);
+    }
+  },
+
   // Called when a media query changes state
   mqChange = function () {
     metaQuery._isTicking = false;
@@ -175,9 +173,7 @@
   // are in the DOM.
   onDomReady = function () {
     collectMediaQueries();
-
     addEvent( window, 'resize', requestMqChange);
-
     mqChange();
   };