代码之家  ›  专栏  ›  技术社区  ›  Zak

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

  •  1
  • Zak  · 技术社区  · 5 年前

    我现在在做作业时遇到了一个问题。我想做一个比特币价格每秒钟都会更新的项目。现在API请求工作正常,我可以从EJS模板看到数据呈现,但是我不能每秒钟更新一次价格。有人能检查一下我的代码,看看我的代码有没有错吗?参考请查收www.preev.com。它显示了我希望如何更新价格。同时检查下面我的代码。

    我已经尝试在中调用API请求应用程序.js并在名为结果.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>
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   Webber    5 年前

    初始答案

    你的setInterval工作得很好,只是在你的函数里数据永远不会改变。

    要解决这个问题,您必须引用一个变量(其中的内容会发生变化),而不是硬编码函数中的值。

    额外解释

    模板语言 . 模板语言根据您的变量解析输出(每页加载一次)。

    你的模板行

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

    解析为

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

    然后你的时间间隔会更新 innerHTML 属于 #showPrice 有了这个价值 500 女士。

    您可能的意思是从客户端(浏览器)发出请求,然后将其响应存储到变量中,例如 latestResult ,然后对函数进行编码以引用该变量,如下所示:

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

    这意味着你的快递申请(应用程序.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