javascript - 等待 JavaScript 中元素的加载

Question

这可能是一个愚蠢的问题，但我还是要问，我有一个关于等待回调的问题。

我在我的 Web 开发项目中使用 Polymer。在我的一个页面中，我有一个循环，可以在循环内加载一个元素:

loop
   "element-a"
end loop

我正在从数据库中获取数据，并且“element-a”的内容是从数据库查询结果中填充的。我只想在“element-a”完成加载后加载另一个“element-a”。

现在，我使用以下方法强制延迟: 愚蠢地 sleep (usec)； 函数 sleepStupidly(usec) { var endtime= new Date().getTime() + usec; while (new Date().getTime() < 结束时间); }

但我需要一种更好的方法来做到这一点，任何建议都会有帮助。

Answer 1

如sheriffderek在评论中指出，promise 或 jQuery 的 $.ajax().success() 方法可能是完成此任务的最佳工具。此外，也可以使用良好的递归。下面是如何在适用于您的案例的 Polymer (v1) 组件中使用这些的示例。

<dom-module id="example-component">
    <template></template>
    <script>
        Polymer({
            is:"example-component",
            properties: {
                //...
            },
            fetchIndex: 0,
            idsToFetch: [1, 2, 3, 4],
            elementData: [],
            ready: function () {
                this.loadElement(this.idsToFetch[this.fetchIndex]);
            },
            loadElement: function(idToFetch) {
                var self = this;        // Create a reference for the ".done()" method to use when it fires
                $.ajax({
                    url: "http://example.com/getdata",
                    data: {"idToFetch": idToFetch}
                }).done(function (data) {           // This will fire after the response is received, which is where you call the next
                    self.elementData.push(data);    // Save the response data
                    self.fetchIndex++;                                      // Move to the next element
                    if (self.fetchIndex < self.idsToFetch.length) {         // If there's more to fetch
                        self.loadElement(self.idsToFetch[self.fetchIndex]); // Recursively call the same method
                    }
                }).always(function(data){                                   // Optional
                    console.log("Fetch complete for ID: " + idToFetch);
                }).error(function (error){                                  // Optional
                    console.log(error)
                });
            }
        })
    </script>
</dom-module>

总之，在 Polymer 的 ready() 处理程序上调用 loadElement() 方法，并为其提供第一个元素以启动提取。在 loadElement() 中，进行获取以获取传入的元素 ID 的数据。一旦获取是 .done() (优于但，类似于 .success())，再次递归调用 loadElement() 方法并为其提供列表中的下一个元素。这将递归地继续，直到 fetchIndex 值等于 idsToFetch 数组的长度。