Eri*_*ric 7 javascript geolocation
我有一个网络应用程序,询问用户其GPS位置。使用看起来像这样的标准代码,它可以正常工作:
function getpos_callback( a ) {
top.location.href = 'location.php?lat=' + a.coords.latitude + '&lon=' + a.coords.longitude;
}
function error_callback( er ) {
top.location.href = 'location.php?err=1';
}
if ( 'geolocation' in navigator ) {
navigator.geolocation.getCurrentPosition( getpos_callback, error_callback, {
enableHighAccuracy: true,
maximumAge: 300000, // 300 seconds = 5 min = max age of cached value to use
timeout: 8000, // 8 seconds
} );
}
Run Code Online (Sandbox Code Playgroud)
问题是:在桌面浏览器上,确定位置可能需要花费一些时间(每个代码4-6秒,最长8秒)。即使使用移动设备,有时也会很慢。当用户只想继续使用该网站时,这几秒钟就像永恒。
我想做的就是立即让用户进入,但是以某种方式“生成一个任务”,要求浏览器在后台找到该位置,然后在检索到该位置时让它在后台将该位置传递给我。
这可能吗?
The method navigator.geolocation.getCurrentPosition is asynchronous by definition. It's specified by W3C to return immediately. You can check the specification for details.
So, you can simply call the function that "let the user in" right after calling getCurrentPositionbefore having the success callback being called. The method getCurrentPosition will have already "spawn a task" in the background when you do that.
The problem in your code is that you're changing the URL of the webpage after receiving the callback, inside the getpos_callback function. I suggest you to change this behavior by updating the UI state using JS instead of reloading the page with the lat/lng parameters.
Refactoring your code, it would look like:
function getpos_callback( a ) {
// Comment the line bellow to avoid loading the page
// top.location.href = 'location.php?lat=' + a.coords.latitude + '&lon=' + a.coords.longitude;
updateScreen(a.coords.latitude, a.coords.longitude);
}
function updateScreen(lat, lon) {
// Update the UI with the lat/lon received instead of getting it from the URL
}
function error_callback( er ) {
top.location.href = 'location.php?err=1';
}
function showUI() {
// "let the user in right away"
}
if ( 'geolocation' in navigator ) {
navigator.geolocation.getCurrentPosition( getpos_callback, error_callback, {
enableHighAccuracy: true,
maximumAge: 300000, // 300 seconds = 5 min = max age of cached value to use
timeout: 8000, // 8 seconds
} );
showUI();
}
else { error(); }
Run Code Online (Sandbox Code Playgroud)
本质上,在我看来,对于你的情况,我认为最好使用 window.onload 事件。这意味着您在加载文档中的所有内容后加载地理位置。这是因为您可以让访问者在 GPS 初始化时浏览页面。
为了生成真正的线程,您可以使用 Worker,但 Worker 无权访问“navigator”对象的“geolocation”对象。但这种情况将来可能会改变。
异步函数可能适合您的情况,因为它不会阻塞主线程。但是,我仍然认为最好在页面加载后运行 getCurrentPosition() 。
setTimeOut() 可能不是最适合您的。虽然 setTimeOut() 可以延迟代码执行,并且在第一次调用时不会阻塞主线程,但无论如何,当轮到执行时,它仍然会阻塞主线程。
给你几个参考:
网络工作者 - 他们如何工作?- 这目前不适用于您的情况,但谁知道未来。
如何阐明异步编程和并行编程之间的区别?- 异步函数不是真正的并行性,但可能适合您的情况,因为它不会阻塞主线程。
setInterval 和 setTimeout 如何工作?- setTimeOut() 可能不适合您的使用情况,但值得一提。
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition - watchPosition 的使用。如果您喜欢 GPS,您将来可能会需要这个。
window.onload 代码示例:
<!DOCTYPE html>
<html>
<body>
<script>
function getpos_callback( a ) {
top.location.href = 'location.php?lat=' + a.coords.latitude + '&lon=' + a.coords.longitude;
}
function error_callback( er ) {
top.location.href = 'location.php?err=1';
}
function getGPS(){
if ( 'geolocation' in navigator ) {
navigator.geolocation.getCurrentPosition( getpos_callback, error_callback, {
enableHighAccuracy: true,
maximumAge: 300000, // 300 seconds = 5 min = max age of cached value to use
timeout: 8000, // 8 seconds
});
}
}
/*
* Attach getGPS to the window.onload event.
*
*/
if ( window.addEventListener ) {
window.addEventListener('load', getGPS);
} else {
window.attachEvent('onload', getGPS);
}
</script>
</body>
</html> Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
227 次 |
| 最近记录: |