如何创建一次计数器每1-8秒(随机)增加1个

所以我认为我很接近，但是我写的内容开始以较大的值来增加，并且运行时间越长。我认为这是一个不正确清除间隔的问题。请随时协助。

<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>

您的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;

我认为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>

我建议我在updateCounter()之外移动setTimer()，否则您每次调用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

相关内容

最新更新

热门标签：