javascript - 重新加载或刷新 JSON 和 HTML div 加载顺序

Question

我正在尝试创建一些代码，以允许我为我正在构建的智能镜像元素提取和显示库存数据。

我已经让它显示所有信息，但无法更新库存数据。我希望它每 5 秒更新一次信息，但是当我这样做时，它基本上会重复并继续在页面外一遍又一遍地输出所有股票。

如何让它在不重新加载整个页面的情况下重新加载数据，以及如何判断它是否正常工作？是否可以添加一个 css 元素，在价格变化时使价格闪烁黄色？

这是我的 fiddle 代码:https://fiddle.jshell.net/Aurum115/2kbpt91z/17/

编辑:澄清第二部分。我基本上想仍然存储旧价格并暂时将其与新价格进行比较，如果它发生变化，则快速闪烁黄色文本。

Answer 1

您遇到的问题是您将新的 HTML 附加到现有的 HTML。

要解决您的问题，您需要删除正在更新的 div 的现有内容。您应该在 setInterval(,,, 行之后添加以下代码:

$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");

不幸的是，它确实会在您每次重新加载时导致“闪烁”。为了减少这种情况，如果您有固定数量的行，您可以将每行标记为 1-X(并对每行中的单元格使用相同的数字)，然后简单地覆盖每行中每个单元格的内容更新...

在我看来，如果您不担心股票出现的顺序，您应该使用一个表格并为与每只股票价格和变化相关的单元格提供 ID(例如，对于 Apple，单元格 ID 可以是: price_NASDAQ:AAPL, change_NASDAQ:AAPL).然后，您只需使用 $("#price_NASDAQ:AAPL").html(...) 更新价格并使用 $("#change_NASDAQ:AAPL").html(...) 更新更改。

如果你想让事情发生(比如闪光)使用 $("#price").css("background-color", "...") 改变颜色并使用 setInterval(...)稍等片刻再改回颜色...