javascript - 简化 setInterval

Question

为了使我的代码更具可读性和更简单，我对这段代码绞尽脑汁:

var refresh = setInterval(datumTijd, 1000);

function datumTijd() {
  document.getElementById("tijd1").innerHTML = tijd();
  document.getElementById("tijd2").innerHTML = tijd();
}

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours();
  return hours+ ':' +minutes;
}

虽然这确实有效，但我感觉有一个功能太多了，那就是 document.getElementById - 我更新两个不同的位<div> s。我只是找不到摆脱这部分的方法，因为我因此陷入困境return代码。

我的尝试:

var refresh = setInterval(tijd, 1000);

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours();
  return hours+ ':' +minutes;
  document.getElementById("tijd1").innerHTML = d1;
}

但什么也没回来:(

Answer 1

在将任何内容放入 innerHTML 之前，您将从函数返回。而且您还在 innerHTML 中放置了错误的内容。

function tijd(){
  var d1 = new Date(),
      minutes = d1.getMinutes().toString().length == 1 ? '0'+d1.getMinutes() : d1.getMinutes(),
      hours = d1.getHours().toString().length == 1 ? '0'+d1.getHours() : d1.getHours(),
      time = hours+ ':' +minutes;
  document.getElementById("tijd1").innerHTML = time;
  document.getElementById("tijd2").innerHTML = time;
}

我真的没有看到将创建时间字符串的函数与将其放入innerHTML的函数分开的问题，就像在原始代码中一样。您可能还有其他需要抽出时间的地方，因此值得将其分离为自己的功能。我对原始代码所做的唯一更改是使用变量而不是调用函数两次:

function datumTijd() {
  var time = tijd();
  document.getElementById("tijd1").innerHTML = time;
  document.getElementById("tijd2").innerHTML = time;
}

您还有用 jQuery 标记的问题，因此您可以使用以下方法简化分配:

function datumTijd() {
    $("#tijd1, #tijd2").text(tijd());
}