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

原文 标签 javascript node.js api ejs

我目前在家庭作业项目中遇到问题。我正在尝试一个项目,其中比特币的价格将每秒更新一次。现在,API请求运行正常,我可以看到EJS模板中呈现的数据,但是我无法每秒更新一次价格。谁能检查我的代码,看看我的代码有什么问题吗?有关参考,请访问www.preev.com。它显示了我希望如何更新价格。并检查下面我的代码。

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

app.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");
});




results.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>

最佳答案

初步答案

您的setInterval可以正常工作,只是在函数内部数据永不更改。

要修复它,您必须引用一个变量(其内容会更改),而不是对函数中的值进行硬编码。

额外说明

例如,您正在使用EJS,这是一种模板语言。模板语言根据您的变量解析输出(每页加载一次)。

您的模板行

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


解析成

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


然后,间隔每隔innerHTML毫秒用该值更新#showPrice500

您可能想做的是从客户端(浏览器)发出请求,然后将其响应存储到变量中,例如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

关于javascript - EJS模板中的setInterval()不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57749301/

相关文章:

javascript - 在当前元素的 onchange 上发送 $(this)

javascript - Knex promise 在for循环内

html - 在 aglio 上渲染属性?

javascript - 改变立方体一个面的颜色 - THREE.js

javascript - 通过多个浏览器/ISP连接识别同一用户

node.js - 如何在Kibana中安装newrelic

javascript - 为什么我无法收到删除请求的请求查询?

php - REST请求数据无法通过 'put'方法读取

javascript - 维基词典 API - 词义

javascript - Angular:处理重新加载页面和用户身份验证