Question

我正在尝试将全局变量mouseX，mouseY分配给函数内的事件侦听器。当我尝试在另一个函数中使用变量时，它们会返回undefined。

我知道它可能是分配给变量范围的问题，但是无法弄清楚，而且我写的任何简单的测试代码都不能重现这个问题。 / p>

造成这种情况的原因是什么？

的javascript：

var mouseX, mouseY;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var bars = [];
for(var i = 0; i < 30; i++)
  bars[i] = new Bar(ctx, 100+i*10, canvas.height, 5, 150);

for(var i = 0; i < bars.length; i++){
  bars[i].checkMouse(); 
  bars[i].display(); 
}

function Bar(ct, x, y, w, h){

  this.x = x;
  this.y = y; 
  this.w = w;
  this.h = h;
  this.y -= this.h;

  this.display = function() {
    ct.rect(this.x, this.y, this.w, this.h);
    ct.fill();
  }  
  this.checkMouse = function() { 
    //if(mouseX >= this.x && mouseX <= this.x + this.w){
    //this.y = mouseY; this.h = height-mouseY; 
    console.log(mouseX);  //////mouseX is undefined?
    //} 
  }  
}  

function getMouse(event) {
  mouseX = event.offsetX;
  mouseY = event.offsetY;
  var coords = "mouseX: " + mouseX + ", mouseY: " + mouseY;
  document.getElementById('display').innerHTML = coords;
}

HTML：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    canvas{
        background-color: #e6e6e6;
        position:relative;
    }   
</style>
</head>
<body>
<div id="display">&nbsp</div>
<canvas onmousemove="getMouse(event)" id="myCanvas" width="500"      height="200">
<script src="myscript.js"></script>
</body>
</html>

Answer 1

正如h2oooooo所指出的那样：这个循环只运行一次：

for(var i = 0; i < bars.length; i++){
bars[i].checkMouse(); 
bars[i].display(); 
}

当它应该表现得像一个主循环。将其复制到getMouse（）函数中就可以修复它。

Answer 2

在这种情况下，它不是范围问题，而是代码片段执行顺序的问题。

完全加载后，脚本文件会被执行。所以你的所有定义，你的对象的创建，并调用在你的例子中不起作用的方法。

mouseX和mouseY初始化的函数在画布的mouseover事件中执行，但稍后会执行。

总而言之：当你的方法被触发时，变量是未初始化的，因为它们在函数中初始化，稍后会执行。

最好的想法是，将有问题的方法的执行与getMouse函数的执行结合起来。

请注意，依赖这样一个全球状态，特别是在创建这样的竞争条件时，这是一种非常糟糕的风格，因为它会导致类似的问题，并在项目增长时几乎无法维护。

全局变量在函数中未定义

2 个答案: