Question

有没有人遇到聚合物的问题＆＃39; async＆＃39;打电话给FireFox？我的网站在最新版本的Chrome中运行良好，但在FireFox中没有那么好运。该站点努力做的第一件事就是从数据库中检索一些对象集合（通过core-ajax / REST API）。在调用检索集合所需的函数之后，我立即调用一个函数，该函数使用来自进行ajax调用和处理响应的各种数据源元素的结果集合异步填充本地存储变量。 FireFox调用指定为populateLocalStorage调用的参数的async函数，但与Chrome不同，调用是在数据源元素收到其ajax响应并相应处理之前发生的。因此，＆＃39; _bugs＆＃39;和＆＃39; _snakes＆＃39; （在此示例中），最终为未定义。以下是有问题的聚合物元素的脚本摘录：

<script>

    Polymer('my-app-index', {

        bugs: null,
        snakes: null,
        spiders: null,

        ready: function () {                
            this.retrieveCollections();
        },

        retrieveCollections: function() {
            // custom datasource elements that make necessary ajax call(s) 
            // (using core-ajax), and handle ajax responses appropriately
            // This element accesses the resulting collections via 2 way databinding 
            // to the datasource(s) element attributes
            this.$.bugsDS.getAll(); 
            this.$.snakesDS.getAll();
            this.$.spidersDS.getAll();

            this.async(this.populateLocalStorage); // Populate local storage with resulting collections
        },

        populateLocalStorage: function () {
            mynamespace._bugs = this.bugs;
            mynamespace._snakes = this.snakes;
        }
    });

</script>

Answer 1

如果每个getAll()执行异步ajax请求，那么所有人都不可能在单个rAF（16.66ms）内完成任务。这是this.async()的作用。它后面的回调被称为requestAnimationFrame。

相反，你会想要对数组的变化作出反应。每当他们填充各自的阵列时，您可以设置本地存储：

retrieveCollections: function() {
    this.$.bugsDS.getAll(); 
    this.$.snakesDS.getAll();
    this.$.spidersDS.getAll();
},

bugsChanged: function() {
  this.populateLocalStorage('_bugs', this.bugs);
},

snakesChanged: function() {
  this.populateLocalStorage('_snakes', this.snakes);
},

populateLocalStorage: function (key, data) {
  mynamespace[key] = data;
}

或者，您可以设置observe块并使用单个函数处理两个属性：

observe: {
  'bugs snakes': 'populateLocalStorage'
}

Polymer Async在FireFox中不起作用

1 个答案: