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

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