javascript - 将 RSS 提要的内容附加到单独的 div

Question

我正在尝试使用以下 JS 代码显示 RSS。但是当我执行此操作时，两个 RSS 提要都更改为相同的内容(稍后执行的内容)，并且所有提要都附加到同一 div。我认为 rss = this 导致了这个问题。有什么解决办法吗？

HTML:

<div id="rss1" class="rss-widget">
        <ul></ul>
</div>
<div id="rss2" class="rss-widget">
        <ul></ul>
</div>
<div id="rss3" class="rss-widget">
        <ul></ul>
</div>

JS:

function RSSWidget(id, url) {

rss = this;
rss.FEED_URL = url;

rss.JSON = new Array();
rss.widgetHolder = $('#' + id + ' ul ');
rss.storiesLimit = 15;

rss.renderBlogItem = function (object) {
    var item = '<li class="blog-item">';
    item += '<a href="' + object.link + '">';
    item += '<div class="blog-item-title">' + object.title + '</div>';
    item += '<div class="blog-item-author">' + object.author + '</div>';
    // item += '<div class="blog-item-content">' + object.content + '</div>';
    item += '</a>'
    item += '</li>';

    rss.widgetHolder.append(item);
}

return $.ajax({
    url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(rss.FEED_URL),
    dataType: 'json',
    success: function (data) {
        if (data.responseData.feed && data.responseData.feed.entries) {
            $.each(data.responseData.feed.entries, function (i, e) {
                rss.JSON.push({ //add objects to the array
                    title: e.title,
                    author: e.author,
                    content: e.content || "",
                    link: e.link
                });
            });

            if (rss.storiesLimit > rss.JSON.length)
                rss.storiesLimit = rss.JSON.length;

            for (var i = 0; i < rss.storiesLimit; i++) {
                rss.renderBlogItem(rss.JSON[i]);
            }

            $('#' + id + ' li ').each(function () {
                var delay = ($(this).index() / rss.storiesLimit) + 's';
                $(this).css({
                    webkitAnimationDelay: delay,
                    mozAnimationDelay: delay,
                    animationDelay: delay
                });
            });

        }
    }
});

}

$.when(RSSWidget('rss1', "http://rss.cnn.com/rss/money_markets.rss"))
.then(function () {
    RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews")
})
.then(function () {
    RSSWidget('rss3', "http://finance.yahoo.com/rss/topfinstories")
});

Answer 1

.then(RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews"));

立即被调用。尝试在 .then() 匿名函数

中调用第二个 RSSWidget

.then(function() {
  RSSWidget('rss2', "http://feeds.reuters.com/reuters/financialsNews")
})

此外，RSSWidget 不会返回任何 promise ；您可以包含 return $.ajax(/* settings */) from RSSWidget 以从 RSSWidget 返回 jQuery Promise 对象。