javascript - 在将元素推送到 HTML ID 时更新实时 JavaScript 数组

Question

作为 JavaScript 新手，我面临着一个小小的困境。让我解释一下脚本:

1. 我已经实现了一个 JavaScript 函数 rss()，它从互联网 RSS 新闻提要中提取并将新闻标题保存到数组 newsArray[] 中。
2. 函数 headlinesInsert() 应该将数组中的每个项目推送到 HTML ID #headlineInsert，类似于它的显示方式 here .
3. 但是，链接示例的 textlist 变量(应替换为我的本地 newsArray[])由于某些原因似乎与替换时不“兼容” HTML 端没有任何显示。

想法 是 rss() 函数每 10 分钟用新标题更新全局 newsArray[] 而 headlinesInsert() 不断将此数据推送到 HTML ID(根据链接示例)。

由于我对 JavaScript 的了解有限，我希望有人能帮助我正确设置以下代码并将想法付诸实践。

// Push RSS Headlines into HTML ID
var newsArray = [];
var listTicker = function headlinesInsert(options) {
    var defaults = {
        list: [],
        startIndex:0,
        interval: 8 * 1000,
    }

    var options = $.extend(defaults, options);
    var listTickerInner = function headlinesInsert(index) {
        if (options.list.length == 0) return;
        if (!index || index < 0 || index > options.list.length) index = 0;
        var value = options.list[index];
        options.trickerPanel.fadeOut(function headlinesInsert() {
            $(this).html(value).fadeIn();
        });
        var nextIndex = (index + 1) % options.list.length;

        setTimeout(function headlinesInsert() {
            listTickerInner(nextIndex);
        }, options.interval);
    };
    listTickerInner(options.startIndex);
}

// The following line should hold the values of newsArray[]
var textlist = new Array("News Headline 1", "News Headline 2", "News Headline 3", "News Headline 4");

$(function headlinesInsert() {
    listTicker({
        list: textlist ,
        startIndex:0,
        trickerPanel: $('#headlineInsert'),
        interval: 8 * 1000,
    });
});

$(function slow(){
    // Parse News Headlines into array
    function rss() {
        $.getJSON("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.stuff.co.nz%2Frss", function(data) {
            newsArray = [];
            for (var i = 0; i < data.items.length; i++){
                newsArray[i] = (data.items[i].title);
            }
            console.log(newsArray);
    })}

    // Refresh functions ever 10 minutes
    rss()
    setInterval(function slow() {
        rss();
    }, 600000); // 10 Minute refresh time
});

Answer 1

检查以下代码。加载 rss 提要后，您需要初始化 listTicker。

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<script>
  var listTicker = function(options) {

    var defaults = {
      list: [],
      startIndex: 0,
      interval: 3 * 1000,
    }
    var options = $.extend(defaults, options);

    var listTickerInner = function(index) {

      if (options.list.length == 0) return;

      if (!index || index < 0 || index > options.list.length) index = 0;

      var value = options.list[index];

      options.trickerPanel.fadeOut(function() {
        $(this).html(value).fadeIn();
      });

      var nextIndex = (index + 1) % options.list.length;

      setTimeout(function() {
        listTickerInner(nextIndex);
      }, options.interval);

    };

    listTickerInner(options.startIndex);
  }

  var textlist = new Array("news1", "news2", "news3");

  $(function() {

    function rss() {
      $.getJSON("https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.stuff.co.nz%2Frss", function(data) {
        newsArray = [];
        for (var i = 0; i < data.items.length; i++) {
          newsArray[i] = (data.items[i].title);
        }
        console.log(newsArray);
        listTicker({
          list: newsArray,
          startIndex: 0,
          trickerPanel: $('#newsPanel'),
          interval: 3 * 1000,
        });
      })
    }

    rss();
  });
</script>
<div id='newsPanel' />