JavaScript实现双函数同时运行：Sea Quest角色同步移动问题

你遇到的核心问题是两个角色共用了同一个全局的intervalId变量，并且每个初始化函数都会先执行clearInterval(intervalId)：

• 先调用initAlien()时，它会启动鲨鱼的定时器并把ID存在intervalId里；
• 接着调用initPlongeur()时，会先清除intervalId指向的鲨鱼定时器，再把潜水员的定时器ID覆盖到intervalId上；
• 最终只有最后一个角色的定时器在运行。

给每个角色单独维护自己的定时器ID，避免全局变量冲突：

修改后的鲨鱼初始化函数 #

// 单独声明鲨鱼的定时器变量
let alienIntervalId;

function initAlien() {
    if (alienIntervalId) {
        clearInterval(alienIntervalId);
    }
    const alienY = Math.floor(Math.random() * (10 - 3 + 1) + 3);
    var RandVersDroite = Math.round(Math.random())
    posAlienY = alienY;
    if(RandVersDroite == 0)
    {
        vaVersLaDroite = false;
        posAlienX = 19
        plateau[posAlienY][posAlienX].style.backgroundImage = "url('./img/aliengauche.png')";
    }
    else
    {
        vaVersLaDroite = true;
        posAlienX = 0
        plateau[posAlienY][posAlienX].style.backgroundImage = "url('./img/alien.png')";
    }
    
    plateau[posAlienY][posAlienX].name = "alien";
    // 把定时器ID存在鲨鱼专属变量里
    alienIntervalId = setInterval(parcoursGrille, 200);
}

修改后的潜水员初始化函数 #

// 单独声明潜水员的定时器变量
let plongeurIntervalId;

function initPlongeur() {
    if (plongeurIntervalId) {
        clearInterval(plongeurIntervalId);
    }
    const PlongeurY = Math.floor(Math.random() * (10 - 3 + 1) + 3);
    var NageurVersDroite = Math.round(Math.random())
    posPlongeurY =  PlongeurY;
    if(NageurVersDroite == 0)
    {
        NageurVersLaDroite = false;
        posPlongeurX = 19
        plateau[posPlongeurY][posPlongeurX].style.backgroundImage = "url('./img/nadador2.png')";
    }
    else
    {
        NageurVersLaDroite = true;
        posPlongeurX = 0
        plateau[posPlongeurY][posPlongeurX].style.backgroundImage = "url('./img/nadador2.png')";
    }
    
    plateau[posPlongeurY][posPlongeurX].name = "Plongeur";
    // 把定时器ID存在潜水员专属变量里
    plongeurIntervalId = setInterval(parcoursGrillePlongeur, 200);
}

调用方式不变 #

initAlien();
initPlongeur();

这样两个定时器会独立运行，不会互相清除，两个角色就能同时移动了。

额外优化建议 #

为了避免更多全局变量冲突（比如vaVersLaDroite、posAlienX这些），可以把每个角色的状态封装成对象，比如：

const alien = {
    intervalId: null,
    posX: 0,
    posY: 0,
    movingRight: true
};

const plongeur = {
    intervalId: null,
    posX: 0,
    posY: 0,
    movingRight: true
};

然后在初始化和移动函数里使用这些对象的属性，进一步减少全局变量污染。

内容的提问来源于stack exchange，提问作者Personne Bélial