diff --git a/example/metaquery.js b/example/metaquery.js index 004eeed..0271927 100644 --- 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 index 004eeed..0271927 100644 --- 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(); };