javascript - 用内部函数变量更改外部函数变量？ JavaScript

Question

我正在为一个项目学习 JavaScript，我需要一些帮助。

我正在尝试使用 getMousePosition() 生成的新位置更改 xPosition 和 yPosition (前 2 个声明的变量)的外部变量 到 positionManager() 函数，但似乎不起作用。

从我在整个网络(以及这里)中搜索到的内容来看，它可能与闭包、作用域和局部变量有关(我仍然对此感到有点困惑)。

<小时/> Edit1:抱歉，我的意思是 var xPosition = 0; 没有被 positionManager() 函数中的值替换。目的是用 xPosition = mousePos.x 来替换它，但它似乎不起作用。

Edit2:每次我在 Canvas 上移动鼠标时，getMousePosition函数都会生成鼠标坐标。然后，positionManager 获取这些位置并更新顶部的 var xPosition(我打算这样做)。但是 var xPosition 仍然显示 0。

function mouseController(canvas, context) {

    var xPosition = 0; // To be replaced by values from positionManager.
    var yPosition = 0; // ^

    canvas.addEventListener("mousemove", positionManager);
    canvas.addEventListener("mouseout", hideCoordinates);
    canvas.addEventListener("click", drawWidget);

    /**
     *Gets the mouse position.
     * @param canvas
     * @returns x and y coordinates. Use (VARIABLE NAME).x and (VARIABLE NAME).y
     */
    function getMousePosition(canvas, event) {
        var rect = canvas.getBoundingClientRect();

        return {
            x: Math.round((event.clientX-rect.left)/(rect.right-rect.left)*canvas.width),
            y: Math.round((event.clientY-rect.top)/(rect.bottom-rect.top)*canvas.height)
        };
    }

    /**
     * Manages and directs the mouse positions received from getMousePosition().
     * 
     * @param event 
     */
    function positionManager(event) {
        var mousePos = getMousePosition(canvas, event);
        // Formats a message that shows the coordinates.
        var mouseCoordinates = 'Coordinates: ' + mousePos.x + ',' + mousePos.y;

        xPosition = mousePos.x; // Change the global variable to this new one.
        yPosition = mousePos.y;
        console.log("positionManager xPosition: " + xPosition); // Works fine, displays new coordinates everytime the mouse moves.

        // Sends the message to be displayed.
        displayCoordinates(mouseCoordinates);
    }
    console.log("global var xPosition: " + xPosition); // Still displays 0 even after positionManager
}   

Answer 1

您已在“mousemove”事件上添加了一个事件监听器，该事件调用 positionManager 方法。请记住，此方法仅在发生“mousemove”事件时执行。

当调用 mouseController 方法时，在该方法完成执行之前不会发生“mousemove”事件。

这意味着控制流将跳转到下一行 canvas.addEventListener("mouseout",..) 并最终跳转到包含 console.log(...) 的最后一行 语句，未调用 positionManager 函数。

执行过程是这样的:

var yPosition = 0;

canvas.addEventListener("mousemove", positionManager);
canvas.addEventListener("mouseout", hideCoordinates);
canvas.addEventListener("click", drawWidget);
// Then execution jumps to the last line as below.
console.log("global var xPosition: " + xPosition);

您可能想在“mousemove”事件发生后检查变量xPosition和yPosition的值。