setInterval не будет вызывать функцию

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 новых растений.Однако, когда я использую функцию ВоспроизвестиPlants с setInterval, она не работает.

Примечание: позже я вызываю createPlants () в моем коде, который заставляет первые 5 заводов отображаться, но следующие 5 не будут отображатьсявверх.Я просто показываю код, который пытаюсь исправить

Answer 1

Код создания должен быть перемещен в функцию, которая вызывается многократно.

ПРИМЕЧАНИЕ. Это неэффективный способ, если вы собираетесь вызывать reprecePlants бесконечно много раз, поскольку массив 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 2

Вам нужно переместить код, который создает растения (блок for ()) внутри функции, которая вызывается каждые 5 секунд (воспроизводить растения).Таким образом, каждый раз, когда вызывается функция, она создает растения.

Если вы пытаетесь добавлять только 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;
}

Answer 3

Вам не обязательно вызывать функцию createPlants из функции reproducePlants.Вы можете добавить вызов после обеих функций.Если я понимаю, чего вы пытаетесь достичь, это должно сделать.