如何從匿名鼠標事件函數內部訪問變量？

Question

我試圖像這樣從外部訪問變量myvar ：

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

但是Chrome的JavaScript控制台一直說“未捕獲的ReferenceError：未定義myvar all-products：203（匿名函數）”

我究竟做錯了什么？ 如何在此函數之外訪問此變量？

編輯：我已經意識到，我試圖做的是無法實現的。 此后，我完全改變了策略，現在代碼可以正常工作了。 （謝謝詹姆斯，尤其是弗拉德的幫助！）

Answer 1

您將需要將變量移到外部范圍，這兩個代碼位均可訪問。

var myvar = -1;

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

console.log(myvar);

Answer 2

我認為這是javascript事件的工作。 基本上，您有一個全局變量，將在鼠標移動時進行更新。 更新變量后，必須讓其他組件知道該變量已准備好進行處理。

編碼：

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');
}); 

UPDATE

從movemove事件處理程序中刪除了var關鍵字。

依賴於myVar的代碼應放在myVarChangedHandler函數中。

我將盡力解釋您所能執行的代碼的最佳內容，代碼中的缺陷以及您應該如何使用類比來解決問題。 讓我們采用以下代碼（已糾正全局變量）

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

假設您是一名程序員，是某個未命名公司的Web開發部門的團隊負責人，並且您有一天要完成的任務清單（類推的任務是每次鼠標移動時都更新myvar ）。您可以使用一個存儲庫（ var myvar ）和2個開發人員：

• 開發人員John（ function(e) { myVar = ... }; ）
• 開發人員Ken（ console.log(myvar) ）

09:00您早上到辦公室（用戶打開頁面）

09:05您啟動服務器/存儲庫

var myvar;

09:10您告訴John：John，請執行此任務，每次完成每個任務后，將其上傳到存儲庫，並在工作時間結束后回家

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

09:11您告訴Ken：Ken，請立即測試存儲庫中的代碼，並在完成測試后返回

console.log(myvar);

（這時，Ken看到存儲庫已空，可以回家了-這是因為John沒時間在一分鍾內完成任務，所以Ken沒什么可測試的）

09:12你回家

在09:12，只有約翰在辦公室里執行任務，您和Ken離開家了，因為您無事可做。 您的代碼也會發生這種情況。 您輸出了myvar的值，但您甚至都沒有移動鼠標，因此，該值是undefined

為了解決這個問題，我們添加了一些修改：

09:00您早上到辦公室

09:05您打開服務器（存儲庫）的電源

09:10你告訴約翰：

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你告訴肯：

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都在辦公室工作。

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

當John告訴Ken他完成了任務時，就會發生實際事件（告訴），當Ken確認John發出信號表示他開始測試時（Ken是事件處理程序）

這就是javascript中事件驅動架構的工作方式。 我建議您放棄jquery，mootools等...，並開始學習核心概念和基礎知識。 重新創建輪子幾次，然后返回到jquery。 我希望我能解釋得足夠讓您理解。