如何让内联JavaScript每秒执行，解决自制JS时钟不刷新问题

问题原因 #

你当前使用的setTimeout方法仅会在延迟1秒后执行一次showTime函数，因此时钟只会更新一次，无法持续刷新时间。

修复方案 #

有两种常用的实现方式可以解决这个问题：

方案1：使用setInterval定时执行 #

setInterval会按照设定的间隔持续重复执行目标函数，同时我们需要额外在页面加载时立即调用一次函数，避免前1秒显示默认的"clock"文本。
修改后的完整JS代码如下：

function showTime() {
  let date = new Date();
  let h = date.getHours(); // 0 - 23
  let m = date.getMinutes(); // 0 - 59
  let s = date.getSeconds(); // 0 - 59
  let session = "AM";

  if (h == 0) {
    h = 12;
  }

  if (h > 12) {
    h = h - 12;
    session = "PM";
  }

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  let time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("MyClockDisplay").innerHTML = time;
}
// 页面加载后立即显示第一次时间
showTime();
// 每1秒更新一次时间
setInterval(showTime, 1000);

方案2：递归调用setTimeout #

如果要避免setInterval可能出现的执行累积误差，也可以在showTime函数末尾递归调用setTimeout，每次执行完成后再设定下一次的执行计划：
修改后的完整JS代码如下：

function showTime() {
  let date = new Date();
  let h = date.getHours(); // 0 - 23
  let m = date.getMinutes(); // 0 - 59
  let s = date.getSeconds(); // 0 - 59
  let session = "AM";

  if (h == 0) {
    h = 12;
  }

  if (h > 12) {
    h = h - 12;
    session = "PM";
  }

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  let time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("MyClockDisplay").innerHTML = time;
  // 执行完成后设定1秒后再次调用自身
  setTimeout(showTime, 1000);
}
// 页面加载后立即触发第一次执行
showTime();

HTML代码不需要做任何修改即可正常运行。

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