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：

在interval之外声明setTimer：

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的呼叫应该由控制代码IMHO完成此外，使用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的计数器（随机）

3 个答案: