Question

我们如何使用setInterval

重复更新div的内容

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

但我这里有几个问题

我们可以在没有匿名函数的情况下使用闭包来实现。我已经尝试过，但最终无法找到任何可行的解决方案。
如何使它无限运行，使用以下代码，一旦达到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

这个应该更清楚。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

对SetInterval和闭包感到困惑

2 个答案: