JavaScript setInterval problems

JavaScript setInterval problems

本文关键字：problems setInterval JavaScript      更新时间：2023-09-26

嘿，伙计们，我正试图用setInterval运行一个循环，但我希望数组中的每个元素都使用随机间隔，而不是整个数组都这样做……这是我目前使用的代码

setInterval(function() {
        for ( var j = 0; j < aliens.length; j++ ){
            aliens[j].shootIt();
        }
    }, 1000+Math.floor(Math.random() * 4000)
);

但我有点被困在这里。。。提前感谢！！！

将for循环移到区间之外，然后在每次迭代中调用一个函数，使每个区间实例都有一个固定的j。

var shootIntervals = []; //this goes in the "global" context of your game
for ( var j = 0; j < aliens.length; j++ ) {
    intervals(j);
}
function intervals(j) {
    shootIntervals[j] = setInterval(function() {
        if (!aliens[j]) return;
        aliens[j].shootIt();
    }, 1000+Math.floor(Math.random() * 4000));
}
//clearInterval(shootIntervals[j]) when they're destroyed

这将为数组中的每个项目提供一个静态随机间隔。

Fiddle

假设您想以随机间隔调用函数，setInterval不适用的原因是随机数是在设置计时器之前计算的。特别是，当您调用setInterval时，函数表达式和计时器间隔都会被计算（一次），然后函数会以计算的间隔被调用。

换句话说，在评估代码时，随机数评估可能会导致2.5秒的间隔。然后，您的函数将以2.5秒的间隔被调用。

您应该使用setTimeout。

var shootAliens = function () {
    // code to shoot aliens goes here
    // ...
    setTimeout(shootAliens, 1000+Math.floor(Math.random() * 4000));
};

现在，在拍摄完所有外星人之后，这个代码将在1到5秒之间的随机时间后安排下一次外星人拍摄。在该拍摄之后，为下一次拍摄计算新的随机延迟。

请看这里：一个页面中可以同时设置多少个javascript setTimeout/setInterval调用？基本上，您需要将setInterval的结果分配给一个变量。这样做将允许您将clearInterval与该变量一起使用

我在这个例子中使用了这种技术。这样做可以更改分配给不同元素的间隔——我们首先检查是否有保存的值。如果是，我们对它们调用clearTimeout。

从那里，我们对每个目标项调用setInterval，将结果保存到数组中，以便下次用户按下按钮时清除。

<!DOCTYPE html>
<html>
<head>
<title>Moving a couple of spans with different intervals</title>
<script type="text/javascript">
var myIntervals = [];
function Init()
{
    if (myIntervals.length != 0)
    {
        for (var i=0, n=myIntervals.length; i<n; i++)
        {
            clearInterval(myIntervals.pop());
        }
    }
    myIntervals.push(setInterval(function(){onMove('sp1');}, (Math.random()*500)>>0 ));
    myIntervals.push(setInterval(function(){onMove('sp2');}, (Math.random()*500)>>0 ));
    myIntervals.push(setInterval(function(){onMove('sp3');}, (Math.random()*500)>>0 ));
}
function constructStyleString(xPos, yPos)
{
    var result = "margin-top: " + yPos + "px;";
    result += "margin-left: " + xPos + "px;";
    return result;
}
function onMove(tgtId)
{
    var xPos, yPos;
    xPos = Math.random() * 640;
    yPos = Math.random() * 480;
    var elem = document.getElementById(tgtId);
    elem.setAttribute("style", constructStyleString(xPos, yPos));
}
</script>
<style>
span
{
    position: absolute;
}
</style>
</head>
<body onload="Init();">
    <button onclick="Init();">(Re)set item intervals</button>
    <span id='sp1'>This is the first item</span>
    <span id='sp2'>This is the second item</span>
    <span id='sp3'>This is the third item</span>
</body>
</html>
相关文章：