对 SetInterval 和闭包感到困惑

Question

如何使用 setInterval 重复更新 div 的内容

我使用此链接中的问题作为参考How to repeatedly update the contents of a <div> by only using JavaScript?

但我这里有几个问题

1. 我们可以在没有匿名函数的情况下使用闭包来实现吗？我已经尝试过，但最终无法找到任何可行的解决方案。
2. 我们如何让它无限运行，使用以下代码，一旦我达到 10，它就会停止。

window.onload = function() {
  var timing = document.getElementById("timer");
  var i = 0;
  var interval = setInterval(function() {
    timing.innerHTML = i++;
    if (i > 10) {
      clearInterval(interval);
      i = 0;
      return;
    }
  }, 1000);
}

<div id="timer"></div>

我对 setIntervals 和闭包感到困惑 有人可以帮我吗

谢谢

Answer 1

你可以用闭包做这样的事情。只需重置您的 i 值，您将始终在您的给定范围内。

window.onload = function() {

  var updateContent = (function(idx) {

    return function() {

      if (idx === 10) {
        idx = 0;
      }

      var timing = document.getElementById("timer");
      timing.innerHTML = idx++;
    }
  })(0);

  var interval = setInterval(updateContent, 1000);

}

<div id="timer"></div>

Answer 2

这个应该比较清楚。

function updateTimer() {
  var timer = document.getElementById("timer");
  var timerValue = parseInt(timer.getAttribute("data-timer-value")) + 1;
  if (timerValue == 10) {
    timerValue = 0;
  }
  timer.setAttribute("data-timer-value", timerValue);
  timer.innerHTML = "the time is " + timerValue;
}
window.onload = function() {
  setInterval(updateTimer, 1000);
}

<div id="timer" data-timer-value="0"></div>