Comments (6)
This is not a browser bug. It follows the specifications. Javascript event queue is a simple FIFO, first registered — first fired. If you register event A and then register event B, it will guarantied that A will always run before B on a compliant browser.
from enquire.js.
Hey @mjlescano!
I understand the issue, and don't worry your english was fine :) This issue was previously raised in issue #29, it is because of the way enquire currently does things - it simply loops through all registered queries, tests their state and acts accordingly. However, in future enquire will depend on the browser's native API for this kind of thing, and with that the same problem raises it's head - it seems even the browser itself does not guarantee order of callbacks. You can see a thorough breakdown in this comment: #29 (comment)
I have converted your example to use 100% native methods as described in the comment above. You will notice that the order is not consistent.:
I realised there was a potential flaw with my previous reasoning however, because console.log
is asynchronous, perhaps that was spoiling the test. So here I have converted the fiddle to use alert
instead of console.log
to ensure everything is synchronous. You will still see that the order is still not consistent:
I'm not sure whether this is intended or not, is it a browser bug or following the spec? Perhaps needs more investigation.
Hope this helps either way
from enquire.js.
Nick!
Thanks for the explanation, I came up with a quick hack that is working for my app, it takes out the unmatch function and execute it when the next match is triggered; the only big downside is that you have to create media quearies for all sizes.
In my case I had to add my 'default' size: enquire.register2('screen and (min-width: 1280px)', {match: function(){}})
;(function(){
var to_unmatch = null
enquire.register2 = function(q, options, shouldDegrade){
if( typeof options === 'function' ) {
options = {match: options}
}
var match = options.match, unmatch = options.unmatch
if( unmatch ) delete options.unmatch
options.match = function(){
if( to_unmatch ){
to_unmatch()
to_unmatch = null
}
if( unmatch ){
to_unmatch = unmatch
}
match()
}
return enquire.register(q, options, shouldDegrade)
}
})()
from enquire.js.
Sorry @mjlescano thought I had replied to you here! Glad you worked out a solution in the end :)
I'll close this issue for now, but if you want to discuss anything further, please feel free!
from enquire.js.
@mjlescano Thanks for posting you solution to this problem. It worked like a dream, full of win!
from enquire.js.
How are we supposed to use the piece of code that @mjlescano posted? Sorry, I'm not that good in JS.
UPDATE:
Ok, figured it out.I just write it down for future reference.
Paste the piece of code that @mjlescano left with the enquire source.
And than call .require2 instead of .require, that's it.
from enquire.js.
Related Issues (20)
- Unit tests for registered media query callbacks. HOT 1
- Playing nice with Foundation 6 Framework HOT 2
- Enquire.js and Fullpage.js not playing nice HOT 2
- Only matched is fired, why? HOT 1
- Menu HOT 2
- Newest version on npm HOT 3
- matchMedia polyfill error HOT 2
- Can you please publish it with the distribution version on npm
- typescript definitions HOT 1
- Compilation warning (version 2.1.4) HOT 11
- matchMedia polyfill stopped working with latest release HOT 10
- Looking for maintainers HOT 4
- bower.json version mismatch HOT 2
- trigger when page loaded first time
- Error: matchMedia not present, legacy browsers require a polyfill HOT 1
- enquire is undefined HOT 6
- Enquire.js (on Shopify Debut Theme) Breaks Bootstrap Modal function HOT 1
- Not working in latest version of Edge on Windows 10
- How to enable enquire.js for a drupal project
- Inspired by Enquire.js
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from enquire.js.