javascript - 无法删除事件监听器

Question

我正在使用socket.io开发一个简单的乒乓球游戏，它将state.player设置为0以使用户成为屏幕左侧的 Racket ，并将state.player设置为1以使用户在屏幕右侧。

最终，玩家将切换位置，因此需要删除并重新添加让鼠标控制屏幕上右侧/左侧桨的事件监听器，以便它们控制屏幕正确一侧的正确桨。

我在某处读到，您必须将函数存储在变量中，然后在该变量上调用removeEventListener，但这似乎不起作用。我在添加事件监听器之前删除了两个事件监听器，以便鼠标只能控制屏幕正确一侧的正确拨片。但是当他们切换边时，鼠标控制两边。

const choosePlayerSide = (player) =>{

    function getLeftMouse(e){
            let mousePos = calcMousePos(e);         
            lpaddle.y = mousePos.y - PADDLE_HEIGHT / 2;
            socket.emit('mousePos', mousePos);              
    }

    function getRightMouse(e){
            let mousePos = calcMousePos(e);         
            rpaddle.y = mousePos.y - PADDLE_HEIGHT / 2;
            socket.emit('mousePos', mousePos);              
    }

    const gr = getRightMouse;
    const gl = getLeftMouse;

    if(player === 0){           
        console.log('choosing player 0')
        this.setPlayer(0);
        // Reset Event Listeners
        canvas.removeEventListener('mousemove', gr);
        canvas.removeEventListener('mousemove', gl);

        canvas.addEventListener('mousemove', gl);

        this.setInPlay();
    }
    else if(player === 1){
        console.log('choosing player 1')
        this.setPlayer(1);

        canvas.removeEventListener('mousemove', gr);
        canvas.removeEventListener('mousemove', gl);

        canvas.addEventListener('mousemove', gr);


        this.setInPlay();
        socket.emit('newplayer');

    }       
}

Answer 1

每次调用和执行外部函数时，嵌套在另一个函数体内的函数声明都会创建新的函数对象。

因此每次调用 choosePlayerSide 时都会创建 getLeftMouse 和 getRightMouse 的新实例，并且不能用于删除事件监听器在之前的通话中添加。

一个相关的错误是在调用 addEventListener 时使用函数表达式。这会在每次添加事件监听器时创建一个新函数，并且无法通过稍后在调用 removeEventListener 的语句中重复相同的函数表达式来删除该函数(计算每个函数表达式会创建一个新的不同函数对象) )。这是“将处理函数存储在变量中”的建议的来源，以解决此版本涉及函数表达式的问题。

请注意，const 不会在编译时初始化变量并将其存储以供多个调用使用。它保护变量值在初始化后不被修改，但每次在函数代码内执行该语句时都会执行初始化。

要解决此问题，请在比 choosePlayerSide 更全局的级别声明 getLeftMouse 和 getRightMouse。根据游戏应用程序的组合方式，这可能位于用于创建游戏的 IEFE 中，或者实际上位于全局 namespace 中(不推荐)。执行此操作后，您可以在添加/删除事件监听器调用中使用它们的名称，而无需在局部变量 gl 和 gr 中复制它们的值。