3

在我的项目中，我希望我的数组每 5 秒增加一次。我尝试使用 setInterval 调用一个函数来执行此操作，但它每 5 秒重置一次我的数组，数量增加而不是自然增长。有没有办法增加数量而不必每次都重置数组？

这些是我用来称呼我的“植物”的功能：

var myPlants = new Array();
var plantSpawn = 0;

function createPlants() {

    reproducePlants();

    setInterval(reproducePlants, 5000);

}   

function reproducePlants() {
    plantSpawn += 5;

    for(var i=0; i<plantSpawn; i++){

        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
            plant.x = Math.random() * canvas.width;
            plant.y = Math.random() * canvas.height;
            plant.rad = 2;
            plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        myPlants[i] = plant;

    }
}
4

3 回答 3

1

执行此操作时，您正在显式重置数组的所有值：

for(var i=0; i < plantSpawn; i++){... myPlants[i] = plant; ...}

请注意，plantSpawn它将保存新的数组大小，因此您将遍历所有旧索引以及新索引并重新分配它们的值。

因此，您可以使用Array.push()以这种方式将5新元素添加到数组中：

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        var rr = Math.round(Math.random() * 150);
        var gg = Math.round(Math.random() * 255);
        var bb = Math.round(Math.random() * 150);

        var plant = new Object();
        plant.x = Math.random() * canvas.width;
        plant.y = Math.random() * canvas.height;
        plant.rad = 2;
        plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

        // Push a new plant on the array.
        myPlants.push(plant);
    }
}

作为建议，您甚至可以将创建新工厂的逻辑封装在方法中，如下所示：

var myPlants = new Array();
var plantsInc = 5;

function createPlants()
{
    reproducePlants();
    setInterval(reproducePlants, 5000);
}

function createPlant()
{
    var rr = Math.round(Math.random() * 150);
    var gg = Math.round(Math.random() * 255);
    var bb = Math.round(Math.random() * 150);

    var plant = new Object();
    plant.x = Math.random() * canvas.width;
    plant.y = Math.random() * canvas.height;
    plant.rad = 2;
    plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';
    return plant;
}

function reproducePlants()
{
    // Push N new plants on the array.

    for (var i = 0; i < plantsInc; i++)
    {
        myPlants.push(createPlant());
    }
}
于 2019-02-22T17:25:51.100 回答
0

您正在覆盖所有现有值，而不是使用 myPlants[i] = plant;usemyPlants.push(plant)

于 2019-02-22T17:27:37.403 回答
0

您需要修改函数以将植物添加到现有数组中，而不是循环遍历数组并为其分配新值。

如果你想每 5 秒向你的数组添加一个新值，这样的事情应该可以工作：

var myPlants = new Array();
var plantSpawn = 0;

function createPlants() {

     reproducePlants();

     setInterval(reproducePlants, 5000);

}   

function reproducePlants() {

    var rr = Math.round(Math.random() * 150);
    var gg = Math.round(Math.random() * 255);
    var bb = Math.round(Math.random() * 150);

    var plant = new Object();
    plant.x = Math.random() * canvas.width;
    plant.y = Math.random() * canvas.height;
    plant.rad = 2;
    plant.skin = 'rgba('+rr+','+gg+','+bb+', 1)';

    myPlants.push(plant);
}

这只是在数组末尾添加一个新植物，而不是每次调用函数时都为当前数组分配新值。如果您想一次添加多于 1 个的植物，您应该可以从这里将其放入 for 循环中。循环的每次迭代只会向您的数组添加一个计划。

于 2019-02-22T17:30:17.000 回答