Meteor Collection.find（）は作業中にアプリケーション全体をブロックします

Question

データの読み込み中にモーダルパッケージを使用してMeteorに読み込み警告を表示しようとしました。

'change .filterPieChart': function(evt){ 

    Modal.show('loadingModal'); 

    /* a little bit of work */ 
    var data = MyCollection.find().fetch(); // takes 3 or 4 seconds 
    /* lot of work */ 

    Modal.hide('loadingModal'); 
} 

通常、アラートは機能の最初に表示され、最後に消えます。しかし、ここでは、MyCollection.find（）の読み込み時間後にアラートが表示され、その後は消えます。関数の先頭に表示する方法は？

私はModal.showを反応変数に置き換えようとしましたが、結果は同じです。反応変数の変化する値は関数の最後に検出されます。

Answer 1

あなたの説明から、JSエンジンは、（コレクションを検索して）計算を実行していて、他の反応変数がすでに検出されているかどうかにかかわらずUIをブロックしている可能性があります。

簡単な回避策は、UIは、一般的にsetTimeoutで、コレクションの検索（または他の集中的な計算を）遅らせることによって、あなたのモーダルを表示するにはある程度の時間を与えるために、次のようになります。

Modal.show('loadingModal'); 

setTimeout(function() { 
    /* a little bit of work */ 
    var data = MyCollection.find().fetch(); // takes 3 or 4 seconds 
    /* lot of work */ 

    Modal.hide('loadingModal'); 
}, 500); // delay in ms 

より複雑なアプローチができrequestAnimationFrame

Answer 2

テンプレートレベルのsubscription + reactiveVarを使用する必要があると思います。それはもっと流星であり、あなたのコードは一貫して見えます。私が見る通り、changeイベントでいくつかの追加作業（いくつかのデータを取得）を行います。これをシミュレーションする代わりに、イベントのデータを実際に実際に検索するのが理にかなっています。

Template.TemplateName.onCreated(function() { 
    this.subsVar = new RelativeVar(); 
    this.autorun(() => { 
     let subsVar = this.subsVar.get(); 
     this.subscribe('publicationsName', this.subsVar);  
    }) 
    }) 

    Template.TemplateName.events({ 
    'change .filterPieChart': function(evt){ 
     Template.instance().collectionDate.subsVar.set('value'); 
     Modal.show('loadingModal'); 

     MyCollection.find().fetch();  

     Modal.hide('loadingModal'); 
    } 
    }) 

私はこのコードをテストしなかったことに注意してください。そして、あなたはes6の矢印機能を使う必要があります。