Question

以下代码在我的MacBook上的Chrome和Safari中正常运行，并立即做出反应。它会导致卡在浏览器中翻转。但是在iOS上，该卡在点击后会在3到8秒之间翻转。

完全困惑。可能是因为minimongo实例对于iPad的处理器来说处理得太多了，这不是一个大数据集，Deck集合中有一个具有一些属性的对象和Cards集合中有大约10个属性的20个对象。所有属性都是短字符串（少于30个字符）。我不认为这会加载iPad的处理能力。

另外，我有一个Galaxy Nexus并且它没有延迟运行。任何解决方案？

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

此外，值得一提的是，在页面加载时，任何卡片渲染之前的延迟时间大致相同。

更新：我已经进入了safari中的Dev工具并记录了事件的时间表，它报告了通过服务器从另一个客户端收到的事件的以下内容，客户端生成的更改有类似的配置文件，有更多的步骤，但这两个功能在deps.js第55行的第一个Timer Fire后大约停留3秒钟。（0ms开始时间记录在点击或从另一个客户端更改时应该记录）

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

来源现已发布在：https://github.com/SnappyCroissant/memoryapp

Answer 1

事实证明是由于整个DOM被重绘（正如@Akshat在上面的评论中指出的那样），因为我将一个数组而不是一个游标传递给Handlebars {{1}在这个问题中发现的循环：https://stackoverflow.com/a/14307612/981731

iOS上的Meteor App中的大规模反应性延迟

1 个答案: