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

Posted 2023-05-09

【中文标题】在将元素推送到 HTML ID 时更新实时 JavaScript 数组

【英文标题】：Update live JavaScript Array while pushing elements to HTML ID

【发布时间】：2017-12-14 02:59:10

【问题描述】：

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

我实现了一个 JavaScript 函数 rss()，它从 Internet RSS 新闻提要中提取新闻标题并将新闻标题保存到数组 newsArray[]。 函数headlinesInsert() 应该将数组中的每一项推送到html ID #headlineInsert，类似于here 的显示方式。 但是，链接示例的 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
);

【问题讨论】：

也许这个 (***.com/questions/19562494/…) 可以帮助你。

【参考方案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' />

【讨论】：

我喜欢这种方法，因为它可以很好地遍历数组数据。但正如我在帖子中提到的，数组每 10 分钟接收一次新数据，当它接收到新数据时，显示的间隔和文本表现得很奇怪。显示的文本在新数据进入之前在数组位置显示文本，但是同时启动函数的新实例以将新数据也推出，这使得标题跳来跳去（ea实例想要显示）和与定义的间隔不同步 - 特别是当阵列数据翻转 2 次以上时。这些“旧实例”需要处理掉

您对我在评论中发布的问题有解决方案吗？基本上，问题在于函数的新实例，每次启动函数时，它似乎都会填充一个新数组而不是更新当前数组。我知道这几乎不引人注意，但是在几个小时的过程中（请记住，每 10 分钟处理一次新查询，并且应该将其数据加载到数组中），非常明显的是时间完全关闭了。它停止的时间超过指定的时间，跳跃元素的顺序等。非常感谢任何解决方案。干杯。