javascript - Dom元素无限递增

Question

我正处于为敌方机器人创建自动瞄准系统的第一步，但我似乎无法让他正确射击。

我创建了一个 div 元素，并将其移动到一个方向。这每 4 秒发生一次。我在创建下一个 div 之前删除了它。这行得通。但不知何故，随着时间的推移，它会创建越来越多的元素，很快就会变成大量的 div，它们都朝同一个方向飞行。

** 在这里做子弹**

function makeBullet() {
    if (player.enemy) {

        if (player.enemyBullet.bulletInterval == true) {
            console.log("working");

            player.enemyBullet.bullet = document.createElement('div');
            player.enemyBullet.bullet.className = 'bullet';
            gameArea.appendChild(player.enemyBullet.bullet);

            player.enemyBullet.bullet.x = player.enemy.x;
            player.enemyBullet.bullet.y = player.enemy.y;

            player.enemyBullet.bullet.style.left = player.enemyBullet.bullet.x + 'px';
            player.enemyBullet.bullet.style.top = player.enemyBullet.bullet.y + 'px';
            player.enemyBullet.bulletInterval = false;
            setInterval(function () {
                player.enemyBullet.bulletInterval = true;
            }, 4000);
          }
        }
    }

** 移动项目符号 **

function moveBullet() {
        let bullets = document.querySelectorAll('.bullet');
        bullets.forEach(function (item) {
            item.x += 3;
            item.y -= 3;
            item.style.left = item.x + 'px';
            item.style.top = item.y + 'px';
            if(item.y < 200){
                item.parentElement.removeChild(item);
                player.enemyBullet.bullet = null;
            }

        })
    }

** 在请求动画函数中调用**

function playGame() {
    if (player.inplay) {
        moveBomb();
        moveBullet();
        makeBullet();

window.requestAnimationFrame(playGame);
    }
}

** 在此处启动间隔 bool 值 **

let player = {
    enemyBullet: {
        bulletInterval: true
    }

}

** 链接到 JS FIDDLE 完整项目 **(单击此处查看发生了什么)

https://jsfiddle.net/mugs17/j7f12a0n/

Answer 1

您正在使用 setInterval，就像设置超时一样。然而 setInterval 不只执行一次。第一次调用 setInterval 后，再次调用它会产生一个新的不同间隔，该间隔也每 4 秒执行一次。

因此每次调用您的函数时都会创建一个新的间隔，这就是为什么您的 div 元素会随着时间的推移而增加

而是将整个创建项目符号代码包装在 setInterval 中，并通过设置 bool 条件然后立即将该条件更改为 false 使其仅执行一次。像这样:

if (player.enemy) {
    if (player.enemyBullet.bulletInterval == true) {
        player.enemyBullet.bulletInterval = false;
        console.log("working");
        setInterval(function () {
            player.enemyBullet.bullet = document.createElement('div');
            player.enemyBullet.bullet.className = 'bullet';
            gameArea.appendChild(player.enemyBullet.bullet);

            player.enemyBullet.bullet.x = player.enemy.x;
            player.enemyBullet.bullet.y = player.enemy.y;

            player.enemyBullet.bullet.style.left = player.enemyBullet.bullet.x + 'px';
            player.enemyBullet.bullet.style.top = player.enemyBullet.bullet.y + 'px';
        }, 4000);
      }
   }
}