javascript - EJS 模板中的 setInterval() 不起作用
问题描述
我目前在家庭作业项目中遇到问题。我正在尝试制作一个比特币价格每秒更新的项目。现在 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>
解决方案
初步答案
您的 setInterval 工作正常,只是在您的函数内部数据永远不会改变。
要修复它,您必须引用一个变量(其内容会发生变化),而不是硬编码函数中的值。
额外说明
例如,您正在使用 EJS,它是一种模板语言。模板语言根据您的变量解析输出(每页加载一次)。
您的模板行
document.getElementById("showPrice").innerHTML= <%= data["bitcoin"]["usd"] %>;
解析成
document.getElementById("showPrice").innerHTML= 9624.46;
然后,您的时间间隔会以该值更新innerHTML
of #showPrice
,每500
毫秒。
您可能的意思是从客户端(浏览器)发出请求,然后将其响应存储到变量中,例如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。
推荐阅读
- python - 抓取网站时出错 (http.client.BadStatusLine: )
- nginx - elasticbeanstalk 不会复制我的 nginx 配置
- python - 获得每组的第 20 到第 80 个百分位数 - Pyspark
- python - Python:将文本写入数据库并读取它
- vb6 - 如何计算 MSFLEXGRID 中的可见列数
- swift - NSCollectionViewItem 按钮操作 无效果
- flutter - 在 Dart 中传递一个类作为方法参数
- javascript - JavaScript 中的响应式轮播
- python - 用于 HTML 的 re.findall 过滤器
- swift - 此版本的 Realm 不支持打开格式版本 5 的 Realm 文件