简化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>，我只是想不出一个方法来摆脱这个部分，因为我因为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());
}