Question

The following code is behaving correctly in Chrome and Safari on my MacBook and is reacting immediately. It causes a card to flip in the browser. However on iOS the card is flipping between 3 to 8 seconds after it is tapped.

Utterly perplexed. Could it be that the minimongo instance is just too much for the iPad’s processor to handle well, this isn’t a big dataset, there is one object with a few properties in the Deck collection and 20 objects with about 10 properties in the Cards collection. All properties are short strings (less than 30 characters). I wouldn’t think this would load something with the processing capabilities of an iPad.

Also, I have a Galaxy Nexus and it runs without lag on it. Any solutions?

var flip = function (card) {
    var id = card;
    var state = Cards.findOne(id).state;
    if (state == 'flipped')
        Cards.update( id, {$set: {state: 'play'}});
    else
        Cards.update( id, {$set: {state: 'flipped'}});
};

Template.cards.events({
    'click .play': function (event) {
        flip(event.currentTarget.id);
    },
    'click .flipped': function (event) {
        flip(event.currentTarget.id);
    },
    'touchstart .play': function (event) {
        flip(event.currentTarget.id);
    },
    'touchstart .flipped': function (event) {
        flip(event.currentTarget.id);
    }
});

Template.cards.preserve({
  '.card[id]': function (node) { return node.id; },
  '.front[id]': function (node) { return node.id; },
  '.back[id]': function (node) { return node.id; },
  '.dummy[id]': function (node) { return node.id; },
});

Template.cards.cards = function () {
    var deck = Deck.findOne({ active: Session.get("activeDeck") });
    if ( deck != undefined )
        var cards = Cards.find({ deck_id: deck['_id'] }, {sort: {order: 1}}).fetch();
    else cards = {};
    return cards;
}

Template.cards.break = function () {
    return 12;
}

var Cards = new Meteor.Collection("cards");
var Deck = new Meteor.Collection("deck");

Meteor.subscribe("cards");
Meteor.subscribe("deck", function () {
    Session.set("activeDeck", 1);
});

Also, it is probably worth mentioning that on the page load there is a delay of roughly the same amount of time before any of the cards render at all.

UPDATE:
I’ve gotten into the Dev tools in safari and recorded a timeline for events and it’s reporting the following for an event received from another client via the server, there is a similar profile for the client generated change, with more steps, but both feature a roughly 3 second pause after the first Timer Fire on deps.js line 55.
(0ms start time is logging as it should on the click or on the change from another client)

Type              | Details          | Location            | Start Time | Duration
Event Dispatched  | readystatechange | sockjs-0.3.4.js:791 | 0ms        | 0.0ms
Event Dispatched  | readystatechange | sockjs-0.3.4.js:791 | 0.5ms      | 7.4ms
Event Dispatched  | readystatechange | sockjs-0.3.4.js:791 | 9.0mms     | 1.0ms
Timer Fired       | 4801             | deps.js:55          | 12.1ms     | 927ms
Timer Fired       | 4803             | sockjs-0.3.4.js:848 | 4.18s      | 6.2ms
Timer Fired       | 4804             | deps.js:55          | 4.19s      | 0.0ms

Source is now available at: https://github.com/SnappyCroissant/memoryapp

Answer 1

It turned out to be due to the fact the entire DOM was being redrawn (as pointed out by @Akshat in the comments above) as I passed an array rather than a cursor to the Handlebars {{#each}} loop as discovered in this question: https://stackoverflow.com/a/14307612/981731