Question

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

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

从我在网络上搜索过的内容（以及此处），它可能与闭包，范围和局部变量（我仍然感到困惑）有关。

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

Edit2：每当我在画布上移动鼠标时，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的值。

用内部函数变量改变外部函数变量？使用Javascript

1 个答案: