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

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

javascript random

Javascript 如何创建每1-8秒递增1的计数器（随机）,javascript,random,setinterval,clearinterval,Javascript,Random,Setinterval,Clearinterval,所以我想我很接近了，但是我写的东西开始以更大的值递增，并且运行时间越长，速度越快。我认为这是一个没有正确清除间隔的问题。请尽可能协助 <html> <head> <script type="text/javascript"> function setTimer(){ var timer = (((Math.floor(Math.random() * 6))+1)*1000);

所以我想我很接近了，但是我写的东西开始以更大的值递增，并且运行时间越长，速度越快。我认为这是一个没有正确清除间隔的问题。请尽可能协助

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


函数setTimer（）{
变量计时器=（（数学地板（数学随机（）*6））+1）*1000）；
间隔时间；
var interval=setInterval（updateCounter，timer）；
}
函数updateCounter（）{
var counter=document.getElementById（“计数器”）；
var count=parseInt（counter.innerHTML）；
计数++；
counter.innerHTML=计数；
setTimer（）；
}
1.

您的

间隔

变量是

设置计时器

的局部变量<代码>清除间隔（间隔）不起作用，因为您正在传递

未定义的

（

interval

的值）。由于变量提升的原因，它不会抛出错误，但传递给

clearInterval

的值肯定是

未定义的
修复#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
}

注意：
您的计时器
变量将在1-6秒之间。你说过你希望它是1-8，所以使用：
var timer = (Math.floor(Math.random() * 8) + 1) * 1000;

您的interval
变量是setTimer
的局部变量<代码>清除间隔（间隔）

不起作用，因为您正在传递

未定义的

（

interval

的值）。由于变量提升的原因，它不会抛出错误，但传递给

clearInterval

的值肯定是

未定义的
修复#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
}

注意：
您的计时器
变量将在1-6秒之间。你说过你希望它是1-8，所以使用：
var timer = (Math.floor(Math.random() * 8) + 1) * 1000;

我认为updateCounter
方法不应该知道它是从计时器调用的，而应该负责调用setTimer（）
。如果要调用该方法从其他不使用计时器的地方更新计数器，该怎么办。管理对updateCounter
的调用应由控制代码IMHO完成。

此外，在这里使用setTimeOut（）
可能更好，因为这样您就不必管理间隔

函数setTimer（）{
变量计时器=（（数学地板（数学随机（）*6））+1）*1000）；
setTimeout（函数（）{
updateCounter（）；
setTimer（）；
}，计时器）
}
函数updateCounter（）{
var counter=document.getElementById（“计数器”）；
var count=parseInt（counter.innerHTML）；
计数++；
counter.innerHTML=计数；
}

1.
我不认为updateCounter
方法应该知道它是从计时器调用的，并负责调用setTimer（）
。如果要调用该方法从其他不使用计时器的地方更新计数器，该怎么办。管理对updateCounter
的调用应由控制代码IMHO完成。

此外，在这里使用setTimeOut（）
可能更好，因为这样您就不必管理间隔

函数setTimer（）{
变量计时器=（（数学地板（数学随机（）*6））+1）*1000）；
setTimeout（函数（）{
updateCounter（）；
setTimer（）；
}，计时器）
}
函数updateCounter（）{
var counter=document.getElementById（“计数器”）；
var count=parseInt（counter.innerHTML）；
计数++；
counter.innerHTML=计数；
}

1.
我建议将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
我建议将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
好吧，interval
一旦超出setTimer
，就会退出作用域，所以你什么也不清除。你有没有想过用setTimeout
而不是setInterval
？当你试图清除它时，<代码>间隔< /代码>还不存在。您的<代码>间隔< /代码>变量需要在函数的声明之外，您希望它在调用<代码> SETIMETER（）/代码>之间。<代码> var间隔<代码>是局部的，在函数之外定义它，或者考虑使用<代码> SETTIMEOUT >interval
一旦退出setTimer
，就会退出作用域，因此您没有清除任何内容。您是否想过使用setTimeout
而不是setInterval
？当您尝试清除它时，interval
尚不存在。您的interval
变量需要在函数的外部声明，您希望它在调用setTimer（）
var interval
的过程中保持在作用域的本地，在函数之外定义它，或者考虑使用<代码> SETTIMEOUT >我想添加使用<代码> SETTIMEOUT/<代码>在这里是一个更好的选择。@ ChrisG也是我的初始THOGUHT。但是决定先发布问题。我现在正在编辑答案。@ibrahimmahrir您的第二个解决方案中的计数没有更新，它只调用了一次。@KevinspaceyKeysersö