EJS 模板中的 setInterval() 不起作用

Question

我目前在家庭作业项目中遇到问题。 我正在尝试制作一个比特币价格每秒都会更新的项目。 现在 API 请求工作正常，我可以看到从 EJS 模板呈现的数据，但我无法每秒更新价格。 任何人都可以检查我的代码，看看我的代码有什么问题吗？ 如需参考，请查看 www.preev.com。 它显示了我希望如何更新价格。 还要检查下面我的代码。

我尝试在 app.js 文件中调用 API 请求，并将其呈现在名为 results.ejs 的 EJS 模板中。

应用程序.js

var express = require("express");
var app = express();
var request = require("request");


app.set("view engine", "ejs");


app.get("/", function(req, res) {
    request("https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true", function(error, response, body) {
        if(!error && response.statusCode == 200) {
            var data = JSON.parse(body);
            res.render("result", {data: data});
        }
    });
});




app.listen(3000, function(){
    console.log("server has started");
});

结果.ejs

<h1>
    Bitcoin Latest
</h1>



Price: $ <span id="showPrice"></span> 
<br>
MarketCap: $<%= data["bitcoin"]["usd_market_cap"] %>
<br>
24h Volume: $<%= data["bitcoin"]["usd_24h_vol"] %>
<br>
24h Change: <%= data["bitcoin"]["usd_24h_change"] %>%


<script>
    function updatePrice(){
        document.getElementById("showPrice").innerHTML= <%= data["bitcoin"]["usd"] %>;
    };

    setInterval(updatePrice, 500);
</script>

Answer 1

初步答复

您的 setInterval 工作正常，只是在您的函数内部，数据永远不会改变。

要修复它，您必须引用一个变量（其内容会发生变化），而不是在函数中对值进行硬编码。

额外说明

例如，您正在使用 EJS，它是一种模板语言。 模板语言根据您的变量解析输出（每个页面加载一次）。

你的模板行

document.getElementById("showPrice").innerHTML= <%= data["bitcoin"]["usd"] %>;

解析为

document.getElementById("showPrice").innerHTML= 9624.46;

然后您的时间间隔每500毫秒用该值更新#showPrice的innerHTML 。

您可能想要做的是从客户端（浏览器）发出请求，然后将其响应存储到一个变量中，例如latestResult ，然后编写您的函数以引用该变量，如下所示：

document.getElementById("showPrice").innerHTML= latestResult;

示例实现

这意味着您的快速应用程序 (app.js) 将在没有数据的情况下呈现result ：

app.get('/', function(req, res) {
  res.render('result');
});

请求部分将在您的模板中：

function updateLatestPrice() {
  fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true').then((result) => {
    const latestResult = result.bitcoin.usd

    document.getElementById("showPrice").innerHTML = latestResult || 'failed'
  })
}

setInterval(updateLatestPrice, 3000)

请注意，我在这里将request更改为fetch因为我无法确定您的客户端代码是否有 babel，所以我使用了浏览器的原生Fetch API 。