如何创建一个每 1-8 秒递增 1 的计数器（随机）

Question

所以我认为我很接近，但是我写的内容开始增加更大的值，并且运行时间越长，速度越快。我认为这是未正确清除间隔的问题。请尽可能提供帮助。

<html>
    <head>
        <script type="text/javascript">

            function setTimer(){
                var timer = (((Math.floor(Math.random() * 6))+1)*1000);
                clearInterval(interval);
                var interval = setInterval(updateCounter, timer);
            }

            function updateCounter(){
                var counter = document.getElementById("counter");                    
                var count = parseInt(counter.innerHTML);
                count++;
                counter.innerHTML = count;
                setTimer();
            }

        </script>
    </head> 

    <body style="margin:5%;" onload="setTimer()">
        <div id="counter">1</div>
    </body>
</html>

Answer 1

您的 interval 变量是 setTimer 的局部变量。 clearInterval(interval); 将不起作用，因为您传递的是 undefined（interval 的值）。它不会因为变量提升而抛出错误，但你传递给clearInterval的值肯定是undefined。

修复 #1：

在setTimer外声明interval：

var interval;
function setTimer(){
    var timer = (((Math.floor(Math.random() * 6))+1)*1000);
    clearInterval(interval);
    interval = setInterval(updateCounter, timer);            // no redeclaring here
}

修复 #2：

由于您是在再次设置间隔之前清除间隔，因此您可以使用 setTimeout，因为它完全符合您的需要：

function setTimer() {
    var timer = (((Math.floor(Math.random() * 6))+1)*1000);
    setTimeout(updateCounter, timer);                        // no clearing is needed this time
}

注：

您的 timer 变量将在 1-6 秒之间。你说你想要它是 1-8，所以使用：

var timer = (Math.floor(Math.random() * 8) + 1) * 1000;

Answer 2

我认为 updateCounter 方法不应该知道它是从计时器调用的并且负责调用 setTimer()。如果您想从不使用计时器的其他地方调用该方法来更新计数器怎么办？管理对 updateCounter 的调用应该由控制代码恕我直言来完成。
另外，在这里使用 setTimeOut() 可能会更好，因为这样您就不必管理时间间隔了。

function setTimer() {
  var timer = (((Math.floor(Math.random() * 6)) + 1) * 1000);
  setTimeout(function() {
    updateCounter();
    setTimer();
  }, timer)
}

function updateCounter() {
  var counter = document.getElementById("counter");
  var count = parseInt(counter.innerHTML);
  count++;
  counter.innerHTML = count;
}

<body style="margin:5%;" onload="setTimer()">
  <div id="counter">1</div>
</body>

Answer 3

我建议将 setTimer() 移到 updateCounter() 之外，否则每次调用 updateCounter() 时都会创建新的间隔。尝试

    function setTimer(){
        var timer = (((Math.floor(Math.random() * 6))+1)*1000);
        var interval = setInterval(updateCounter, timer);
    }

    function updateCounter(){
        var counter = document.getElementById("counter");                    
        var count = parseInt(counter.innerHTML);
        count++;
        counter.innerHTML = count;
    }

    setTimer();

编辑：已删除 clearInterval

如何创建一个每 1-8 秒递增 1 的计数器（随机）

How to create a counter that increments by 1 every 1-8 seconds(random)

javascript

random

setinterval

clearinterval