如何在Pug中使用setInterval？解决getClock非函数报错问题

DevOps 小满

2026-7-14

问题解决："getClock is not function" 错误修复

错误原因分析

函数传递错误：你在Node.js中传递给Pug的是getClock: getClock()，这是执行函数后返回的字符串（clock的值），而非函数本身，导致Pug中找不到getClock函数。
环境混淆：服务器端Node.js的函数无法直接在客户端浏览器中运行，两者运行环境完全隔离，不能跨环境调用函数。
Pug脚本语法错误：- setInterval(...)是Pug的服务器端执行代码，定时器逻辑应该放在客户端脚本中，否则会在服务器端执行而非浏览器。

修正后的代码

Node.js 代码

let clock;
function getClock() {
  const now = new Date();
  // 补零处理，保证时间格式为两位数字
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  clock = `${hours}:${minutes}:${seconds}`;
}

app.get("/main", (req, res) => {
  // 生成初始时间，传递给Pug渲染初始值
  getClock();
  // 仅传递初始时钟字符串，无需传递服务器端函数
  res.render("mainP.pug", { lists: rows, clock: clock });
});

Pug 代码

body 
  .header 
    .clock#clock= clock

// 使用script.包裹客户端原生JS代码，在浏览器中执行
script.
  function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    // 更新DOM中的时钟内容
    document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
  }
  // 每秒执行一次时钟更新
  setInterval(updateClock, 1000);