需要從ajax調用設置全局變量

Question

我從ajax調用中收到一個值，我需要將這些變量用於其他函數。 我在設置全局變量時遇到了一些困難。 基於另一個SO問題，我認為將變量傳遞給SUCCESS上的另一個函數會將值放在全局范圍內，但這不起作用。

success: function (json) {
    var xCoord = json.features[0].geometry.x;
    var yCoord = json.features[0].geometry.y;
    var xyCoord = json.features[0].geometry;
    setXY(xCoord,yCoord,xyCoord);
},

function setXY(x,y,geometry){
    var xCoord = x;
    var yCoord = y; 
    var xyCoord = geometry
}

我怎樣才能達到這個看似簡單的任務？

Answer 1

在父作用域中聲明變量，然后在success函數中為它們賦值。

var xCoord, yCoord, xyCoord;

...

success: function (json) {
    xCoord = json.features[0].geometry.x;
    yCoord = json.features[0].geometry.y;
    xyCoord = json.features[0].geometry;
},

現在，父作用域中的所有函數都可以訪問這些變量。

Answer 2

你可以使用window對象

window.userdata = {};

function setXY(x,y,geometry){
    window.userdata.xCoord = x;
    window.userdata.yCoord = y; 
    window.userdata.xyCoord = geometry;
}

如果你願意，可以使用全局對象：

var userdata = {};    
function setXY(x,y,geometry){
    userdata.xCoord = x;
    userdata.yCoord = y; 
    userdata.xyCoord = geometry;
}

Answer 3

使用關鍵字var時，在本地范圍內聲明變量。 如果你在函數內部，那么只能從里面訪問該變量。

您可以在全局范圍內聲明變量，也可以通過窗口訪問全局范圍：

var global1 = true;

function setXY(x,y,geometry){
    global1; //return true
    window.global1; //true also
    window.global2 = 3;
    global3 = 5; // If you use no var keyword, it also points to the global scope.
} 

Answer 4

您可以使用window對象來設置全局變量：

function setXY(x,y,geometry){
    window.xCoord = x;
    window.yCoord = y; 
    window.xyCoord = geometry
}

但這不是一個非常好的做法。 您應該將應用程序命名為命名空間，以避免混淆全局命名空間，以及與您可能希望將來包含的其他庫的潛在沖突。

有幾種方法可以解決這個問題。

最簡單的方法是在全局命名空間中定義一個可以將所有其他變量保存在離散對象中的單個對象：

var myData;
function setXY(x,y,geometry){
        myData.xCoord = x;
        myData.yCoord = y; 
        myData.xyCoord = geometry
 }

另一種方法是closures 。 通過這種方式，您可以將代碼塊封裝在全局空間之外。

(function() {
   var myVar;
   function mySuccess(data) {
     myVar = data;
     $.ajax({ url: 'test.com', success: mySuccess});
   }
})()

這樣，閉包內的所有代碼都可以訪問myVar ，但是你並沒有不必要地添加到全局命名空間。

另一種方法是使用一個對象。

var Ajaxer = function(){

};
Axazer.prototype.setData = function(data) {
   this.data = data;
}
Azaxer.prototype.doAjax = function() {
   var self = this;
   $.ajax({ url: 'test.com', success:function(data){self.setData(data);});
}


var myAjxer = new Ajaxer();
myAjaxer.doAjax();

這種方式可以說是最有用的，因為它允許你維護離散的類，你可以傳遞和交互。