3

次のコードは、私の MacBook の Chrome と Safari で正しく動作し、すぐに反応します。ブラウザでカードが反転します。ただし、iOS では、カードがタップされてから 3 秒から 8 秒の間で反転します。

まったく当惑した。minimongo インスタンスは、iPad のプロセッサが適切に処理するには多すぎる可能性があります。これは大きなデータセットではありません。Deck コレクションにはいくつかのプロパティを持つ 1 つのオブジェクトがあり、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);
});

また、ページの読み込み時に、カードがレンダリングされるまでにほぼ同じ時間の遅延があることに言及する価値があるでしょう。

更新:私はサファリで開発ツールに入り、イベントのタイムラインを記録しました。サーバー経由で別のクライアントから受信したイベントについて次のように報告しています。クライアントが生成した変更には同様のプロファイルがあり、より多くの手順がありますが、両方とも、deps.js の 55 行目で最初の Timer Fire の後に約 3 秒の一時停止を特徴としています。

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で入手できます。

4

1 に答える 1

1

この質問で発見されたように、Handlebars ループにカーソルではなく配列を渡したときに、全体が再描画されていたという事実が原因であることが判明しましたDOM(上記のコメントで @Akshat が指摘したように) : https://stackoverflow .com/a/14307612/981731{{#each}}

于 2013-01-14T00:31:23.527 に答える