腳本不允許geolocation.getCurrentPosition完成其回調函數

Question

我需要將用戶的當前位置打包到對象中並將其發送給PHP腳本。所以我現在有以下幾點。

位置對象

function position(lat, lon) { 
    this.latitude = lat; 
    this.longitude = lon; 

    this.setlat = function(lat) { 
     this.latitude = lat; 
    }; 

    this.setlon = function(lon) { 
     this.longitude = lon; 
    }; 

    this.print = function() { 
     alert(this.longitude + ", " + this.latitude); 
    }; 
} 

控制流

var origin = new position(0, 0); 

$(document).ready(function() { 

    getLocation(); 
    origin.print(); 


}); 

功能

function getLocation() { 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(setLocation, showError, {timeout:60000}); 
    } else { 
     alert("GeoLocation is not supported on this browser or device."); 
     return null; 
    } 

} 

function setLocation(position) { 
    alert('callback success!'); 
    origin.setlat(position.coords.latitude); 
    origin.setlon(position.coords.longitude); 
} 

function showError(error) { 
    switch(error.code) { 
     case error.PERMISSION_DENIED: 
      console.log("User denied the request for Geolocation."); 
      break; 
     case error.POSITION_UNAVAILABLE: 
      console.log("Location information is unavailable."); 
      break; 
     case error.TIMEOUT: 
      console.log("The request to get user location timed out."); 
      break; 
     case error.UNKNOWN_ERROR: 
      console.log("An unknown error occurred."); 
      break; 
    } 
} 

問題我在調用setLocation回調之前，主控制流程會繼續，並忽略我要求它爲我獲得某些東西的事實。我調用getLocation並獲得「0，0」的警報，因爲這是原始設置的原因。所以出於某種原因，我的setLocation回調只是不會被調用，直到程序中的其他內容完成。

我已經在文檔中四處看了一遍，但它很直接，並且沒有很多事情發生，所以很難確定發生這種情況的原因。

我知道很多人都在爲此苦苦掙扎，似乎有很多'看這個主題'，但所有這些話題都指向與我自己相同的代碼，但格式化爲有點不同。

重要的是要注意，我真的需要封裝在全局變量中的位置數據，因爲我將在頁面加載時將我的位置與幾十個其他位置進行比較。

嘗試的解決方案
我已經試過限制離開基於回調函數完成我navigator.geolocation.getCurrentPosition() while循環，但結果總是在無休止的循環。

-I've試圖以允許功能有一定的時間來完成與在PositionOptions的maximumAge和timeout值打，但同樣這只是導致setLocation整理其它所有的計劃函數調用完成後。

- 我嘗試過使用兩個單獨的$(document).ready(function(){});以分割getLocation()和origin.print()函數。

-I've嘗試使用watchPosition代替getCurrentPosition.

最後，我真的只需要對爲什麼在getCurrentPosition回調函數沒有完成，直到一切做一些澄清。

Answer 1

雖然它並沒有真正似乎所有這些與您的回調函數中執行邏輯有所不同getCurrentPostion Javascript中有一些技術可以讓您處理t中的異步他的方式，從而大大清理你的代碼。我將在下面演示的是使用jQuery的$.Deferred object來獲取當前位置並將其打包成可供其他功能使用的變量。

function getLocation() { 

    var deferred = $.Deferred(); 

    setTimeout(function() { 
     navigator.geolocation.getCurrentPosition(function(pos) { 

      origin = new position(pos.coords.latitude, pos.coords.longitude); 
      deferred.resolve(); 

     }); 

    }, 2000); 
    // 2.00 seconds 
    return deferred.promise(); 
} 

需要注意的是，我們正在實例化origin，並在同一範圍內與deferred.resolve() resolvin遞延對象是很重要的。

現在我們要做的就是調用getLocation()，但增加了一些語法來指定處理在getLocation()內部解決的對象的函數必須等到它完成訪問它們。

getLocation().done(function() { 
    origin.print(); 
    //do other stuff with origin 
}); 

這將成功地打印您的座標，你可以自由地做任何事情都要通過getCurrentPosition得到，像使用谷歌地圖的數據。

Answer 2

您可以替換此：

var origin = new position(0, 0); 

$(document).ready(function() { 

    getLocation(); 
    origin.print(); 


}); 

與此

var origin = new position(0, 0); 

$(document).ready(function() { 

    getLocation(); 

}); 

function getLocation() { 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(setLocation, showError, {timeout:60000}); 
    } else { 
     alert("GeoLocation is not supported on this browser or device."); 
     return null; 
    } 
} 

// this is the callback 
function setLocation(position) { 
    alert('callback success!'); 
    origin.setlat(position.coords.latitude); 
    origin.setlon(position.coords.longitude); 
    // this is a new function that makes stuff 
    processLocation(); 
} 

// do your stuff here 
function processLocation(){ 
    origin.print(); 
    // do your stuff here like comparing to other locations or sending data 
    if (origin.latitude == something) blah... 
} 

基本上做一個函數裏你的邏輯，並把它定義的setLocation回調內部