-2
\$\begingroup\$

I am creating web page in which I get user location and store it in an input field of a form using javascript. But perfomance is slow.Review my code and provide a better way.

		var LocArrayForPerfomance = [];
		LocArrayForPerfomance["longitude"]=document.getElementById("longitude");
		LocArrayForPerfomance["latitude"]=document.getElementById("latitude");
	function main_get_location() {
		var checkbox = document.getElementById("location_checkbox");
		var loc_text=document.getElementById("loc_text");
		function clearBox()
		{
		    checkbox.checked=false;
		    document.getElementById("latitude").value="";
		    document.getElementById("longitude").value="";
		}
		function getLocation() {
		  if (navigator.geolocation) 
		  {
		    navigator.geolocation.getCurrentPosition(savePosition, showError);
		  }
		  else 
		  { 
		    loc_text.innerHTML = "Geolocation is not supported by this browser.You can't post.Use a device or browser which supports geolocation.";
		    clearBox();
		  }
		}

		function savePosition(position) {
			LocArrayForPerfomance["latitude"].setAttribute("value",position.coords.latitude)
			LocArrayForPerfomance["longitude"].setAttribute("value",position.coords.longitude)
			checkbox.checked=true;
		}

		function showError(error) {
			clearBox();
		  switch(error.code) {
		    case error.PERMISSION_DENIED:
		      loc_text.innerHTML = "User denied the request for Geolocation."
		      break;
		    case error.POSITION_UNAVAILABLE:
		      loc_text.innerHTML = "Location information is unavailable."
		      break;
		    case error.TIMEOUT:
		      loc_text.innerHTML = "The request to get user location timed out."
		      break;
		    case error.UNKNOWN_ERROR:
		      loc_text.innerHTML = "An unknown error occurred."
		      break;
		  }
		}
		getLocation();
	}
<!DOCTYPE html>
<html>
<head>
	<title>Create a post</title>
</head>
<body>

	<form autocomplete="off" method="post" enctype="multipart/form-data">

		<br>
		<input type="text" name="latitude" id="latitude">
		<input type="text" name="longitude" id="longitude">
		<label for="location_checkbox">Add location:</label>
		<input type="checkbox" id="location_checkbox" onclick="main_get_location()" required>
		<br>
		<input type="submit" value="share location!" id="loc_submit">
	</form>
	<p id="loc_text" color="red"></p>
</body>
</html>
Sometimes when submit is clicked,location is not sent to the server (even though checkbox is checked,documentGetElementByID() is slow).I read somewhere,using arrays will improve perfomance.Still it is slow.Should I use a delay function??

| improve this question | | | | |
\$\endgroup\$
  • 3
    \$\begingroup\$ Welcome to CodeReview@SE. Sometimes … location is not sent to the server How did you establish this? For the "fate" of this question, it may be helpful too to revisit How do I ask a Good Question? and improve, e.g., spacing following punctuation. \$\endgroup\$ – greybeard Mar 28 at 6:16
  • \$\begingroup\$ If the code doesn't work yet, it's not ready for review. I'm not sure how you think a delay function will improve performance either. \$\endgroup\$ – Mast Apr 3 at 6:12
  • \$\begingroup\$ It works.But slow. \$\endgroup\$ – TheGuardener Apr 4 at 14:34
  • \$\begingroup\$ Please can you add a description on what this code hopes to achieve. \$\endgroup\$ – Peilonrayz Apr 6 at 20:32
0
\$\begingroup\$

You should prepare everything (find elements, etc) you can as soon as you can (on document load, assuming the elements Are not added dynamically). Dont wait for user action.

Also dont load current location upon checking the checkbox. Load it upon form submit, prevent default submit action And only send to server after location Is obtained. Maybe display some load progress bar to the user meanwhile...

| improve this answer | | | | |
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.