Question

嘿伙计们我正在尝试使用setInterval运行循环，但我希望数组中的每个元素使用随机间隔而不是整个数组这样做...这是我目前使用的代码< / p>

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

但我有点被困在这里......提前致谢!!!

Answer 1

假设您想以随机间隔调用该函数，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秒之间的一段随机时间后安排下一次外星人射击。在拍摄之后，为下一次拍摄计算新的随机延迟。

Answer 2

将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

Answer 3

见这里：how many javascript setTimeout/ setInterval call can be set simultaneously in one page? 基本上，您需要将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>

JavaScript setInterval问题

3 个答案: