流星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。

一個簡單的解決方法是通過延遲集合搜索（或任何其他密集計算），通常通過setTimeout ，為UI提供一些時間來顯示模態：

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

我認為您需要使用模板級別的訂閱+ reactVar。 它更像是流星方式，並且您的代碼看起來一致。 如我所見，您在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箭頭功能。