Different match and unmatch orders

[mjlescano]

Match and unmatch functions are triggered in different order when going smaller than going big.
I made this fiddle to compensate my rusty english
http://jsfiddle.net/mjlescano/FmmTa/3/embedded/result/

Tested resizing the window,

reducing the window width the triggers are:
match:bigger
unmatch:bigger
match:normal

making bigger the window, triggers:
match:normal
match:bigger
unmatch:normal

It should be
match:normal
unmatch:normal
match:bigger

[WickyNilliams]

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

[mjlescano]

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)
  }
})()

[WickyNilliams]

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!

[WebStew]

@mjlescano Thanks for posting you solution to this problem. It worked like a dream, full of win!

[federicovezzoli]

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.

[verrasse]

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.