这个问题来自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?还是有更好的方法来处理这种情况?
你可以去抖动它,它会给你一种类似的感觉,它不需要做任何其他事情而不是输入:
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