Question

我正在使用setInterval来运行Javascript函数，该函数在div中生成一个新的随机整数。单击div时计时器启动。我有问题，在五秒钟后停止生成新数字。

使用setTimeout，我在5秒后隐藏div;停止随机数，但我失去了div。

如何有效地停止在div中生成数字，而不是隐藏它？

HTML：

<div id="div" onmousedown='F();'>Click here</div>

JS：

function F(){
    var div = document.getElementById("div");

    setInterval(function(){                 
        var number = Math.floor(Math.random()*28)   ;           
        div.innerHTML = number;
    }, 1000);


    setTimeout(function(){                  
        div.style.display = 'none';
    },5000);
};

Answer 1

只需使用计数器跟踪间隔已勾选的次数，然后使用clearInterval将其停止：

var count = 0;
var intervalID = setInterval(function() {
    // generate your random number
    count++;
    if (count === 5) {
        clearInterval(intervalID);
    }
}, 1000);

Answer 2

写了一些东西，但你想要做的是跟踪你的间隔句柄然后清除它。您可以使用setTimeout

执行此操作

var forXsecs = function(period, func) {
  var handle = setInterval(func, 1000);
  setTimeout(function() { clearInterval(handle); }, period * 1000);
}

时机并不完美。马特的答案也有效。

另一种选择是对Matt的回答略有改变，删除setInterval并仅使用超时。

var count = 0;
var forXsecs = function(period, func) {
    if(count < period) {
        func();
        count++;
        setTimeout(function() {forXsecs(period, func);}, 1000);
    } else {
        count = 0; //need to reset the count for possible future calls
    }
}

Answer 3

如果你只想让它每秒运行一次，那么你可以这样做5次：

<强> HTML：

<div id="5seconds"></div>

<强> JS：

var count= 0;
setInterval(function(){
    if(count < 5){
        document.getElementById('5seconds').innerHTML = Math.random();
        count++
    }
},1000);

这将每秒生成一个随机数。直到5秒过去了

Answer 4

您应该使用clearInterval来停止计时器。

为此，您传入从setInterval函数（创建它）返回的计时器的 id （或句柄）。

我建议从正在执行的功能中清除间隔计时器（使用clearInterval）。

var elm = document.querySelector("div.container");
var cnt = 0;
var timerID;

function generateNumber()
{
  cnt += 1;
  elm.innerText = cnt;
  if (cnt >= 5) {
    window.clearInterval(timerID);
    
  }
}

timerID = window.setInterval(generateNumber, 1000);

.container {display:block; min-width:5em;line-height:5em;min-height:5em;background-color:whitesmoke;border:0.1em outset whitesmoke;}

<label>1s Interval over 5s</label>  
<div class="container"></div>

如何运行javascript函数X秒？

4 个答案: