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 。