Fatal编程技术网

JavaScript设置间隔问题

javascript html loops

JavaScript设置间隔问题,javascript,html,loops,intervals,Javascript,Html,Loops,Intervals,嘿，伙计们，我试图用setInterval运行一个循环，但是我希望数组中的每个元素都使用一个随机间隔，而不是整个数组都这样做。。。这是我目前使用的代码 setInterval(function() { for ( var j = 0; j < aliens.length; j++ ){ aliens[j].shootIt(); } }, 1000+Math.floor(Math.random() * 4000) ); 但我被

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

setInterval(function() {
        for ( var j = 0; j < aliens.length; j++ ){
            aliens[j].shootIt();
        }
    }, 1000+Math.floor(Math.random() * 4000)
);
但我被困在这里了。。。提前感谢

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

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

您应该改用setTimeout

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

将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
这将为数组中的每个项提供一个静态随机间隔

请看这里： 基本上，您需要将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>
六羟甲基三聚氰胺六甲醚。。。它似乎工作得更好，但当我开始向外星人射击时，游戏似乎慢了下来。。。另外，你知道如何修正滞后吗？冻结游戏似乎冻结时，我开始拍摄太快或其他东西没有看你的代码，你叫它等我看不出什么是错误的。不同之处在于，我的循环应该只执行一次，因为它将一个间隔绑定到每个外星人，如果您执行循环不止一次，您将有太多的间隔。=]好的，这里的图片不会显示，因为我不确定我是否可以上传它们。。。根据那个网站，我发现我的代码中有很多错误。。。其中大多数是我已经定义了关于新for循环的变量。。。这是糟糕的编码吗？或者这很好？没有所有的文件很难测试，但是我认为for循环应该在init异形函数中，或者在初始化异形的地方。您在那里也有一个新数组[]，可以使用[]推荐的数组，也可以使用带圆括号的新数组。这里是稍微更新的jsbin-这很好，但出于某种原因，我想不出如何将其应用到我的代码中…@D34thSt4lker@ray toal，请注意，您仍然可以有一个函数表达式，而不会污染范围：setTimeoutfunction shooteAliens{/*…您的代码..*/；setTimeOutshooteAliens，msec}，以这种方式，同一作用域中的msec将是未定义的，但函数本身内部是可调用的。 
<!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>