Question

我正在尝试创建一种生态系统，其中的物体会随着时间的推移而生成。但是，当我尝试使用setInterval增加数量时，它不起作用。当我自己调用该函数时，它起作用，但是当我使用setInterval时，它不起作用。

var plantSpawn = 5;

function createPlants() {

    setInterval(reproducePlants, 5000);

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

        var plant = new Object();
            plant.x = Math.random() * canvas.width;
            plant.y = Math.random() * canvas.height;
            plant.rad = 2;
            plant.skin = 'green';

        myPlants[i] = plant;

    }
}   

function reproducePlants() {
    plantSpawn += 5;
}

我的目标是每5秒出现5棵新植物。但是，当我将reproducePlants函数与setInterval一起使用时，它将不起作用。

注意：我稍后将在我的代码中调用createPlants（），这将显示前5个植物，但接下来的5个将不会显示。我只是在显示我要修复的代码

Answer 1

您不一定需要从createPlants函数中调用reproducePlants函数。您可以在两个功能之后添加呼叫。如果我了解您要实现的目标，那就应该这样做。

Answer 2

创建代码必须在重复调用的函数内移动。

注意：如果要无限次调用reproducePlants，则这不是一种有效的方法，因为每次都会重新构造myPlants数组。

// Init with 0, because we increment it inside reproduce Plants
var plantSpawn = 0;
var myPlants = [];

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

function reproducePlants() {
    const canvas = document.getElementsByTagName('canvas')[0];
    plantSpawn += 5;

    for(var i = 0; i < plantSpawn; i++) {
        var plant = new Object();
        plant.x = Math.random() * canvas.width;
        plant.y = Math.random() * canvas.height;
        plant.rad = 2;
        plant.skin = 'green';

        myPlants[i] = plant;
    }
}

Answer 3

您需要在每5秒调用一次的函数中移动用于创建植物的代码（for（）块）（复制植物）。因此，每次调用该函数都会创建植物。

如果您尝试每5秒仅将5个新植物添加到植物阵列，则不应每次都重新创建阵列。最好跟踪上一次添加的索引，然后立即继续。

我创建了一个名为lastCreatedIndex的变量，因此您可以更好地了解发生了什么。因此，代码第一次将plants[i]从0到4运行，第二次从5到9 ...

var myPlants = [];
var lastCreatedIndex;
var plantSpawn;


function createPlants() {
    plantSpawn = 5; //Initialize with 5 plants
    lastCreatedIndex = 0; // Starts from index 0
    reproducePlants();
    setInterval(reproducePlants, 5000);
}   

function reproducePlants() {

    for(var i = 0 + lastCreatedIndex; i < plantSpawn; i++) {
        var plant = new Object();
        plant.x = Math.random() * canvas.width;
        plant.y = Math.random() * canvas.height;
        plant.rad = 2;
        plant.skin = 'green';

        myPlants[i] = plant;
        console.log(i); // Output the number of the plant that has been added
    }
    lastCreatedIndex = i; //Update the last index value
    plantSpawn += 5;
}

setInterval不会调用函数

3 个答案: