如何从匿名鼠标事件函数内部访问变量? [英] How can I access a variable from inside an anonymous mouse-event function?

问题描述

我试图像这样从外部访问变量 myvar :

I'm trying to access the variable myvar from outside like so:

$(document).mousemove(function(e){
    var myvar = winHeight() + scrollY() - e.pageY;
}); 
console.log(myvar);

但是Chrome的JavaScript控制台一直在说未捕获的ReferenceError:未定义myvar所有产品:203 (匿名函数)"

But Chrome's javascript console keeps saying "Uncaught ReferenceError: myvar is not defined all-products:203 (anonymous function)"

我做错了什么?如何在此函数之外访问此变量?

What am I doing wrong? How do I access this variable outside this function?

编辑:我已经意识到我试图做的事情是无法实现的.从那以后，我彻底改变了策略，现在代码可以正常工作了. (谢谢James，尤其是Vlad的帮助！)

I've realised that what I was attempting to do isn't realisable. I have since changed my strategy completely and the code works fine now. (Thank you James and especially Vlad for your help!)

推荐答案

我认为这是处理JavaScript事件的工作.基本上，您有一个全局变量，将在鼠标移动时进行更新.更新变量后，必须让其他组件知道该变量已准备好进行处理.

I think this is a job for javascript events. Basically you have a global variable which will be updated on mouse move. After you update the variable you have to let other components know that the variable is ready for processing.

代码:

var myVar; // the global variable

// the function that will be caled when myVar has been changed
var myVarChangedHandler = function() {
    console.log('myVar variable has been changed: ' + myVar);
}

// bind the event to the above event handler
$('body').bind('MyVarChangedEvent', myVarChangedHandler);

// instal mouse move event handler on document
$(document).mousemove(function(e){
    myVar = winHeight() + scrollY() - e.pageY;
    $('body').trigger('MyVarChangedEvent');
}); 

更新

从movemove事件处理程序中删除了var关键字.

Removed the var keyword form the movemove event handler.

取决于myVar的代码应放在myVarChangedHandler函数中.

The code that depends on myVar should be put in the myVarChangedHandler function.

我将尽力向您解释代码所能做到的一切，以及它的缺陷 以及您应该如何使用类比解决问题. 让我们采用以下代码(已纠正全局变量)

I'll try to explain the best i can your code, the flaw in it and how you should be solving the problem using an analogy. Let's take the following code (global variable corrected)

var myvar;
$(document).mousemove(function(e){
    myvar = winHeight() + scrollY() - e.pageY;
}); 
console.log(myvar);

假设您是程序员，是Web开发部门的团队负责人 在一些不具名的公司中，您有一天要完成的任务清单( 类推的任务是每次鼠标移动时更新myvar) 您可以使用一个存储库(var myvar)和2个开发人员:

Let's say you, the programmer, are a team leader in a web development department in some unnamed company and you have a list of tasks to be done in a day of work ( the tasks in our analogy is to update myvar everytime the mouse moves) You have at your disposal a repository (var myvar) and 2 developers:

• 开发人员John(function(e) { myVar = ... };)
• 开发者Ken(console.log(myvar))

• developer John (function(e) { myVar = ... };)
• developer Ken (console.log(myvar))

09:00您早上到办公室(用户打开页面)

09:00 You come to the office in the morning (user opens the page)

09:05您打开了服务器/存储库的电源

09:05 You power up the server / repository

var myvar;

09:10您告诉约翰: 约翰，请执行此任务，并且每次完成每个任务时 将其上传到存储库中，下班后回家

09:10 You tell John: John, please do this tasks and everytime you complete each task uploaded it to the repository, and go home after your hours are finished

$(document).mousemove(function(e){
    myvar = winHeight() + scrollY() - e.pageY;
});         

09:11您告诉肯: 肯，请立即测试存储库中的代码，然后再返回 完成测试

09:11 You tell Ken: Ken, please test the code in the repository right now and go home after you have finished testing

console.log(myvar);

(此时，Ken看到存储库为空，然后回家了-这是因为 约翰一分钟都没时间解决任务，所以肯没有要测试的东西.

(at this time, Ken sees that the repository is empty and goes home - that's because John didn't had time to solve even on task in a minute so Ken has nothing to test)

09:12你回家

在09:12，只有约翰在办公室里做任务，你和肯离开家了 因为你没有其他事情要做. 您的代码也会发生这种情况.您输出myvar的值，但您甚至都没有移动鼠标 所以，当然，值是undefined

At 09:12 there's only John at the office doing the tasks, You and Ken have left home because you don't have anything else to do. This also happens to your code. You output the value of myvar but you haven't even moved the mouse so, of course, the value is undefined

为解决此问题，我们添加了一些修改:

To solve this we add some modifications:

09:00您早上到办公室

09:00 You come to the office in the morning

09:05您打开了服务器(存储库)的电源

09:05 You power up the server (repository)

09:10您告诉约翰:

09:10 You tell John:

John, please do this tasks and everytime you complete each task
uploaded it to the repository and tell Ken to test the code.
Go home after you have finished

09:11您告诉肯:

09:11 You tell Ken:

Ken, each time John tells you that he has completed a task,
fetch the code from the repository and test it.
Go home after he has finished

09:12你回家

在09:12约翰和肯都在办公室里干他们的工作.

at 09:12 both John and Ken are at the office doing their job.

在上述情况下，ken是myVarChangedHandler = function() {...};

In the above case ken is myVarChangedHandler = function() {...};

当约翰告诉肯(Ken)他完成任务时，实际事件发生了(告诉)， 当Ken确认John发出信号时，他开始测试(Ken是事件处理程序)

When John tells Ken that he completed the task an actual event occurs (the telling), when Ken acknowleges John signal he starts testing (Ken is the event handler)

这是javascript中事件驱动的体系结构的工作方式. 我建议您放弃jquery，mootools等...并开始学习核心概念 和基础知识.重新创建轮子几次，然后返回到jquery. 希望我能解释得足够让您理解.

This is how event driven architecture in javascript works. I would advise you to ditch jquery, mootools, etc... and start learning the core concepts and the basics. Reinvent the wheel a few times then go back to jquery. I hope i explained enough for you to understand.

这篇关于如何从匿名鼠标事件函数内部访问变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！