只加载一次js函数 - Load js function only once onload

Load js function only once onload

本文关键字：一次 js 函数加载 | 更新日期: 2023-12-27

我希望这个JS函数在加载页面时只调用一次。

function getLocation() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
} else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;  
    window.location.href = "?    latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;
    var flag = true;
}

它将进入一个无限循环，因为您正在使用重定向页面

window.location.href = "?    latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;

每次加载页面时。相反，您可以对showPosition（）执行类似操作：

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;  
    var query = "?    latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;
    var stateObj = { query: query };
    history.pushState(stateObj, "query added", query);
    var flag = true;
}

这将在不刷新页面的情况下将查询参数添加到URL中。有关history.pushState()的更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

您可以简单地使用onload事件处理程序：

<body onload="getLocation()">

一旦页面准备就绪，就会立即启动。

或者，您可以像这样使用jQuery的.ready()：

$(document).ready(function(){
    getLocation();
});

您的代码是一个很大的闭包！它在这个步骤上生成新的请求：

window.location.href = "?latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;

你可以使用不同的方式：

加载时简单解析window.location.href，如果(window.location.href.indexOf('?')!=-1)
用浏览器数据存储或cookies标记客户端，并在询问位置之前进行检查

使用Ajax将位置信息发送到服务器：

var req = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange=function(){if((req.readyState==4)&&(req.status==200)){ console.log('location was sended to server'); }};
req.open("GET","?latitude="+position.coords.latitude+"&longitude="+position.coords.longitude,true);
req.send(null);