对SetInterval和闭包感到困惑

Confused about SetInterval and closures

本文关键字：闭包 SetInterval      更新时间：2023-09-26

如何使用setInterval

重复更新div的内容?

我使用这个链接中的问题作为参考如何反复更新一个

只使用JavaScript?

但是我有几个问题。

  1. 我们可以使用闭包而不使用匿名函数吗?我已经试过了，但没有找到可行的解决办法。
  2. 我们如何让它无限运行，用下面的代码，一旦i达到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>

我对setinterval和闭包感到困惑有人能帮我一下吗?

谢谢

您可以使用闭包做类似的事情。只要重置你的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>

这个应该更清楚。

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>

相关文章：