Different match and unmatch orders about enquire.js HOT 6 CLOSED

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.:

http://jsfiddle.net/FmmTa/5/

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:

http://jsfiddle.net/FmmTa/6/

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.