如何在 ejs 中每 2 秒更新一次时间元素

Posted 2023-03-14

【中文标题】如何在 ejs 中每 2 秒更新一次时间元素

【英文标题】：How can i update time element every 2 sec in ejs

【发布时间】：2020-06-27 20:15:32

【问题描述】：

我创建了一个dashboard.js 文件和几个.ejs 文件

这是我的 stats.ejs 文件

<tr>
    <th scope="row" class="list-group-item d-flex justify-content-between align-items-center" data-toggle="tooltip" title="Duration"> Duration </th>
    <td ><i class="fa fa-fw fa-music" aria-hidden="true"></i> <span class="col-5 text-nowrap" id="Duration"><% if(player)  %> <%= time %> <%  else  %>00:00 <% %></span></td>
</tr>

如何每 2 秒升级一次时间

这在dashboard.js 文件中

  app.get("/dashboard/:guildID/stats", checkAuth, (req, res) => 
    const guild = client.guilds.get(req.params.guildID);
    let player = client.music.players.get(req.params.guildID);
    let time;
    if (player) time = duration(player.queue[0].duration ).toString();
    if (!guild) return res.status(404);
    const isManaged = guild && !!guild.member(req.user.id) ? guild.member(req.user.id).permissions.has("MANAGE_GUILD") : false;
    if (!isManaged && !req.session.isAdmin) res.redirect("/");
    renderTemplate(res, req, "guild/stats.ejs", guild , player ,time);
  );

时间变量每秒更新一次，我该怎么办？

【参考方案1】：

实现这一目标的一种方法是使用前端 javascript 触发网络以获取最新信息

const yourInfoSegment = $('#segment');

// Fetching the latest data every 2 seconds
setInterval(async () => 
  try 
    const res = await fetch('YOU-API.com/dashboard/$guidID/stats');
    if(!res.ok) 
      // Shows user there is a error while fetching data
      return;
    
    // Updating the DOM with the new html code from the API
    const htmlCode = await res.text();
    yourInfoSegment.innerHTML = htmlCode;
  
  catch (err) 
    // Show some error UI to the user
    console.error(err);
  
, 2 * 1000);