对 SetInterval 和闭包感到困惑

Question

我们如何使用setInterval

重复更新div的内容

我正在使用此 link 中的问题作为参考

但我这里有几个问题

我们可以不用匿名函数，使用闭包吗？我已尝试但无法找到任何可行的解决方案。
我们怎样才能无限地运行，使用下面的代码，一旦我达到 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>

对 SetInterval 和闭包感到困惑

Confused about SetInterval and closures

html

javascript

closures

setinterval