Dom 元素无限递增

Question

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

我创建一个div 元素，并沿某个方向移动它。这每 4 秒发生一次。我在创建下一个div 之前删除了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);
}
}

**在此处启动间隔布尔值 **

let player = {
enemyBullet: {
bulletInterval: true
}
}

**链接到JS小提琴完整项目**(点击这里查看发生了什么(

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

Answer 1

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

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

相反，将整个创建项目符号代码包装在 setInterval 中，并通过设置布尔条件，然后立即将该条件更改为 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);
}
}
}