javascript - 使用此功能未显示结果

Question

我编写了以下函数来获取一些 RSS 提要数据。

这很有趣，因为脚本末尾的两个警报都会显示，但结果不会通过 jQuery::append() 附加到它的 div，我必须提到传递给附加函数的 ID 是完全正确。

    function generateTopNews() {
        // Manage RSS url
        var targetsURLs = new Array("http://www.jamejamonline.ir/rssfeed?code=01-10-95", "http://www.khorasannews.com/RSS.aspx?type=1", "http://www.tabnak.ir/fa/rss/1", "http://www.varzesh3.com/rss/");
        var logoURLs = new Array("images/jm_logo.png", "images/kh_logo.png", "images/tb_logo.png", "images/v3_logo.png");
        // Temp variables
        var resultArray = new Array();
        var rssCounter = 0;
        // RSS Loader
        for (var i = 0; i < targetsURLs.length; i++) {
            $.ajax({
                url:  "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=" + encodeURIComponent(targetsURLs[i]),
                dataType: "json",
                success: function(data) {
                    var fetchedFeed = data.responseData.feed.entries;
                    for (var j = 0; j < fetchedFeed.length && j < 2; j++) {
                            // RSS HTML Template
                            var htmlContent = "<div class=\"col-md-4 col-sm-6\">";
                            htmlContent += "    <div class=\"panel panel-default\">";
                            htmlContent += "        <div class=\"panel-heading\">";
                            htmlContent += "            <img class=\"pull-left\" src=\"" + logoURLs[i] + "\" height=\"23px\" />";     
                            htmlContent += "            <p>" +  fetchedFeed[j].title + "<p>";     
                            htmlContent += "        </div>";
                            htmlContent += "        <div class=\"panel-body\">";                    
                            htmlContent +=              fetchedFeed[j].contentSnippet;
                            htmlContent += "       </div>";
                            htmlContent += "    </div>";
                            htmlContent += "</div>";
                            // Count up the RSS
                            resultArray[rssCounter++] = htmlContent;
                    }
                }
            });
        }
        // Start
        $("#rss-container").append("@Start");
        alert("@Start");
        // Append the results
        for (var i = 0; i < resultArray.length; i++) {
            $("#rss-container").append(resultArray[i]);
        }
        // End
        $("#rss-container").append("@End");
        alert("@End");
    }

Answer 1

由于ajax是异步的，您应该在成功事件中编写append()代码。否则 append() 在从服务器获取数据之前发生。

function generateTopNews() {
      // Manage RSS url
      var targetsURLs = new Array("http://www.jamejamonline.ir/rssfeed?code=01-10-95", "http://www.khorasannews.com/RSS.aspx?type=1", "http://www.tabnak.ir/fa/rss/1", "http://www.varzesh3.com/rss/");
      var logoURLs = new Array("images/jm_logo.png", "images/kh_logo.png", "images/tb_logo.png", "images/v3_logo.png");
      // Temp variables
      var resultArray = new Array();
      var rssCounter = 0;
      // RSS Loader
      for (var i = 0; i < targetsURLs.length; i++) {
          $.ajax({
              url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=" + encodeURIComponent(targetsURLs[i]),
              dataType: "json",
              success: function (data) {
                  var fetchedFeed = data.responseData.feed.entries;
                  for (var j = 0; j < fetchedFeed.length && j < 2; j++) {
                      // RSS HTML Template
                      var htmlContent = "<div class=\"col-md-4 col-sm-6\">";
                      htmlContent += "    <div class=\"panel panel-default\">";
                      htmlContent += "        <div class=\"panel-heading\">";
                      htmlContent += "            <img class=\"pull-left\" src=\"" + logoURLs[i] + "\" height=\"23px\" />";
                      htmlContent += "            <p>" + fetchedFeed[j].title + "<p>";
                      htmlContent += "        </div>";
                      htmlContent += "        <div class=\"panel-body\">";
                      htmlContent += fetchedFeed[j].contentSnippet;
                      htmlContent += "       </div>";
                      htmlContent += "    </div>";
                      htmlContent += "</div>";
                      // Count up the RSS
                      $("#rss-container").append(htmlContent);
                  }
              }
          });
      }

  }