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

 892974506_bdb55d_896 发布于 2022-12-31 20:51

这个问题来自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?还是有更好的方法来处理这种情况?

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

    2022-12-31 20:55 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有