Question

这个问题来自Ember.js的主页上的组件示例，这是代码：

App.GravatarImageComponent = Ember.Component.extend({
  size: 200,
  email: '',

  gravatarUrl: function() {
    var email = this.get('email'),
        size = this.get('size');

    return 'http://www.gravatar.com/avatar/' + hex_md5(email) + '?s=' + size;
  }.property('email', 'size')
});

当我尝试这个例子时，我注意到每次输入一个字符时，浏览器都会触发一个获取头像的请求。如果我的电子邮件地址有30个字符，则会有30次请求被触发，直到从服务器返回正确的请求。我觉得这样效率太低了，不是吗？

在挖掘出指南之后，我没有找到解决这个问题的方法，所以我想知道：这是否有可能延迟重新计算一个计算属性，比如1000ms？还是有更好的方法来处理这种情况？

Answer 1

你可以去除它，这让你有类似的感觉，它不需要做任何其他事情而不是打字：

App.GravatarImageComponent = Ember.Component.extend({
  size: 200,
  email: '',
  fetchEmail:'',

  watchEmail: function(){
    Em.run.debounce(this, this.setEmail, 400)
  }.observes('email'),

  setEmail: function(){
    this.set('fetchEmail', this.get('email'));
  },

  gravatarUrl: function() {
    var email = this.get('fetchEmail'),
        size = this.get('size');

    return 'http://www.gravatar.com/avatar/' + md5(email) + '?s=' + size;
  }.property('fetchEmail', 'size')
});

示例：http://emberjs.jsbin.com/lacefi/1/edit

Answer 2

我不得不在我的观察者身上放置一个去抖动器来限制我的一个项目中我的实际业务逻辑的执行。

在这种情况下，您可以将计算属性gravatarUrl更改为普通属性，并移动逻辑以在观察者上构建网址，观察者观察email和size并更新{{1}然后简单地在你的观察者身上放一个去抖动者。我没有测试下面的代码，但这是想法：

gravatarUrl

如何在Ember.js中延迟计算属性重新计算？

2 个答案: