javascript - 每当应用程序停止时添加加载指示器

Question

我有一个操作导致应用程序挂起几秒钟。我想添加某种加载指示器来表明它正在做某事，而不仅仅是卡住。

我已经尝试过一些事情，其中​​一些是我认为行不通的完整实验。

首先，这是我在尝试添加任何类型的指标之前所得到的:

filterObserver: function(){
  // we needed the debounce because it would crash the app if it took too long
  // it has to filter through ~10,000 records

  Ember.run.debounce(this, this.filterFoo, 1500); 
}.observes('filterValue'),

我认为这会起作用，但它似乎要等到观察者中的所有内容都完成后才会重新渲染页面:

controller.js

isLoading: false,
filterObserver: function(){
  this.set('isLoading', true);

  Ember.run.debounce(this, this.filterFoo, 1500);

  this.set('isLoading', false);
}.observes('filterValue'),

模板.hbs

<ul class="project-list {{if isLoading 'loading'}}">
{{#each group in foo}}
  {{group-item group=group}}
{{/each}}
</ul>

所以，我想也许我需要强制它重新渲染才能显示更改。我将整个列表移至组件中，以便访问该组件的 rerender 方法:

组件.js

export default Ember.Component.extend({
  loadingObserver: function() {
    this.rerender();

    Ember.run.schedule('afterRender', this, function() {
      this.sendAction('filterAll');
    });
  }.observes('isLoading')
});

controller.js

actions: {
  filterAll: function() {
    Ember.run.debounce(this, this.filterActivities, 1500);
    this.set('isLoading', false);
  }
}

所以，我想也许 Ember 的运行循环会起作用。此时，我非常沮丧，但我想尝试一切可能有效的方法:

组件.js

export default Ember.Component.extend({
  loadingObserver: function() {
    this.rerender();

    Ember.run.schedule('afterRender', this, function() {
      this.sendAction('filterAll');
    });
  }.observes('isLoading')
});

这些都不起作用。

我知道不同的路由方法，例如 afterModel、destroy 等。此时我的页面已经加载，因此在这种情况下这些方法都不起作用。

我相信这是因为 Ember 会等到观察器中的所有内容都完成后才会重新渲染模板。因此，我需要某种方法让它在模板中发生任何更改时显示此指示器，或者等待它完成设置变量并添加类，然后再继续执行操作的代码。

想法？有想法吗？

根据记录，我知道 1.13 引入了 glimmer，这将有助于应用程序挂起。然而，我们依赖的几个插件仍然使用 1.11，所以恐怕我们暂时只能使用它。

Answer 1

编辑

显然run.later仅适用于我的情况，因为我也使用run.debounce。下面的代码在我的特定情况下不起作用，因为 run.next 认为 run.debounce 代码已完成，但实际上并未完成。这应该适用于大多数情况:

Ember.run.once(this, function() {
  this.set('isLoading', true);
});

Ember.run.next(this, function() {
  // your code here
  // `isLoading` will be true while this is running,
  // so your loading indicator will still be present

  this.set('isLoading', false);
});

如果您需要一个在 Ember 的运行循环之外运行的指示器，我原来的答案仍然有效。但是，您可能在绝大多数情况下都可以使用上面的代码。

<小时/>

原始答案

我实际上能够解决这个问题。我只是使用 Ember.run.later 来让 Ember 等待所有其他异步事件结束。在我的应用程序中，这相当于:

var _this = this;
this.set('isLoading', true);

Ember.run.debounce(this, this.filterFoo, 1500);
Ember.run.later(function() {
  _this.set('isLoading', false);
}, 1500); // I set the timeout to 1500 ms because that's the same as the debounce

我在 Ember 的指南中发现了这个:A SPINNING BUTTON FOR ASYNCHRONOUS ACTIONS 。您可以在 Ember's docs 中阅读有关 run.later 的更多信息。 .

如果我不这样做，它会尝试立即执行所有代码。这基本上只是让它等待，直到完成或超时。