Question

所以我正在创建一个使用FB SDK的FB应用程序。在下面的代码中，我得到了一个我喜欢的电影列表以及他们在“数据”中的FB页面ID。然后，我正在迭代它以获得电影的名称和使用页面ID，我得到他们的页面链接和他们的页面配置文件图片的src。然后我使用细节创建以下HTML块：

<article>
<figure>
    <img src="source">
</figure>
<div>
    <a href="link"/>
</div>
</article>

因此，我动态创建每个文章块，然后将它们附加到以下HTML代码：

<body>

 <header></header>

 <section>
     <article></article>
 </section>

 <footer></footer>

 <script src = *source of my .js file*></script>

</body>

这是我的js代码：

// data has a list of FB movie pages, each containing the name of the movie and page id
function print(data)
{
//iterates through the object passed to print movie names in console.  

var target = document.querySelector('article');
var docFrag = document.createDocumentFragment();
for (var i = 0; i < data.length; i++)
    {
        var temp = data[i];
        var linkElement = document.createElement('a');
        var linkText = document.createTextNode(temp["name"]);
        linkElement.appendChild(linkText);

        //getting the link to the movie's FB page
        getLink(function(response){linkElement.href = response;},temp["id"]);

        var imgElement = document.createElement('img');

        //getting the src of the picture of the movie's page
        getPic(function(response){imgElement.setAttribute("src", response);},temp["id"]);

        imgElement.setAttribute("width", "304");
        imgElement.setAttribute("height", "228");
        imgElement.setAttribute("alt", temp["name"]);

        var article = document.createElement("article"),
            figure = document.createElement("figure"),
            div = document.createElement("div");

        div.appendChild(linkElement);
        figure.appendChild(imgElement);
        article.appendChild(figure);
        article.appendChild(div);
        console.log(article);
        docFrag.appendChild(article);
    }
    target.appendChild(docFrag);
}

function getLink(callback,id)
{
   FB.api('/'+id+'?fields=link', function(response)
   {
       callback(response.link);
   });
}
function getPic(callback,id)
{
   FB.api('/'+id+'?fields=cover{source}', function(response)
       {
      callback(response.cover.source);
  });
}

我的问题是，当我打印输出时，除最后一个之外的所有文章块都会丢失href和src的'img'块。当我在控制台中打印文章时，除最后一个外，href和src都是空的。我想也许它与FB SDK的异步调用有关，但我不确定。有人可以帮忙吗？

Answer 1

var具有功能范围，而不是块范围，并且已被提升。请改用const或let，尤其用于for循环，尤其是在异步for循环中：

for (let i = 0; i < data.length; i++) {
  const temp = data[i];
  const linkElement = document.createElement('a');

对于口译员来说，你目前所做的事情看起来像这样：

function print(data) {
var target;
var docFrag; 
var temp;
var linkElement;
// etc
for (i = 0; i < data.length; i++) {
  temp = data[i];
  linkElement = document.createElement('a');
  // etc

因此，在循环结束后，一旦响应返回，每个回调都引用相同的imgElement，最后一个回调for循环。

您还可以使用forEach，这在大多数方面明显优于for循环。（没有手动迭代，自动抽象，接受函数作为参数）

data.forEach((temp) => {
  const linkElement = document.createElement('a');
  // ...

分配从异步函数

1 个答案: