传递Date对象作为参数致变量失效，该如何重构代码？

核心问题 #

可以传递Date对象作为参数，但你的代码存在两个关键错误：

• setInterval直接调用函数时，不会自动传入你的全局today变量，回调函数收到的是定时器ID，导致函数内的today为undefined，调用getHours()等方法时报错。
• 全局的today是页面加载时创建的固定时间，即使能传递给函数，也无法实现实时更新的效果。

另外，setInterval(getTime, 1)的间隔太频繁（1毫秒），会导致性能浪费，一般设置为1000毫秒（1秒）即可。

修正方案 #

要减少new Date()的创建次数，可以在每次定时执行时只创建一次Date对象，再传递给各个处理函数。同时整合更新逻辑，确保所有时间相关内容都能实时更新：

// 星期数组无需重复创建，定义为全局常量
const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

// 页面加载时先执行一次，避免初始无内容
updateDateTime();

// 每秒更新一次时间、问候语、日期（日期一天变一次，但每秒执行性能影响可忽略）
setInterval(updateDateTime, 1000);

// 统一处理所有时间相关更新，仅创建一次Date对象
function updateDateTime() {
  const now = new Date();
  
  // 更新星期与日期
  document.getElementById("day").textContent = weekday[now.getDay()];
  document.getElementById("date").textContent = now.toLocaleDateString();
  
  // 更新问候语
  updateGreeting(now);
  
  // 更新时间
  updateTime(now);
}

// 接收Date参数更新问候语
function updateGreeting(date) {
  const greetingText = date.getHours() < 12
    ? "Good Morning"
    : date.getHours() >= 18
    ? "Good Evening"
    : "Good Afternoon";
  document.getElementById("greeting").textContent = greetingText;
}

// 接收Date参数更新时间
function updateTime(date) {
  document.getElementById("time").textContent = date.toLocaleTimeString();
}

关键改动说明 #

• 用updateDateTime作为统一入口，每次定时执行仅创建一个now对象，传递给其他函数，减少重复创建。
• 初始化时手动调用updateDateTime()，确保页面加载后立即显示内容。
• 替换innerHTML为textContent，更安全（避免注入风险）且性能更好。
• 调整定时器间隔为1000毫秒，平衡实时性与性能。

内容的提问来源于stack exchange，提问作者ConfusedMel