如何运行一个javascript函数X秒？

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（或 handle）（创建它）。

我建议从正在执行的函数中清除间隔计时器（使用 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秒？

How to run a javascript function X seconds?

javascript

function

period