javascript for循环直到循环结束才执行函数，然后迭代函数n次

I am attempting to load some div's with google map images from a loop that adds one to the value of a document.get. Problem is the getLocation() call comes at the final iteration of the loop, but then iterates the loops n number of times.

我试图从一个循环加载一些div与谷歌地图图像,循环增加一个document.get的值。问题是getLocation()调用在循环的最后一次迭代中出现,但随后迭代循环n次。

for(var i = 1; i < length; i++){
var longitude = 1.8612393999999999;
var latitude = 50.7263312;
document.getElementById("longInput").value = longitude;
document.getElementById("latInput").value = latitude;

var mapholder = "mapholderM"+i;
document.getElementById("mapholderValue").value = mapholder;
theMapholder=document.getElementById(mapholder);

getLocation();
}

getLocation() uses longInput and latInput values for lat and lon variables, and theMapholder as a place to put the target div image. Maps are able to get the co ordinates and as explaned below on the final, or end of the loop also the theMapholder value.

getLocation()对lat和lon变量使用longInput和latInput值,并将mapholder作为放置目标div图像的位置。地图能够获得坐标,并在下面的最后一个或循环结束时解释theMapholder值。

I think this is not an issue with getLocation(), and more how I am attempting to use it. By adding an alert in the getLocation() call and viewing the elements on screen I know that the elements are populated though the loop and change, then get location is called n number of times after this happens. Then getLocation() only picks up the values that are set as the iterations of giving element values are complete.

我认为这不是getLocation()的问题,而是我试图使用它的更多方法。通过在getLocation()调用中添加一个警报并查看屏幕上的元素我知道元素是通过循环填充并更改的,然后在发生这种情况后调用位置n次。然后getLocation()仅获取在给定元素值的迭代完成时设置的值。

Adding an alert at the beginning of the loop makes the loop go round n number of times then execute getLocation() only once.

在循环开始时添加警报使循环循环n次,然后只执行一次getLocation()。

Just to sum up: loops and changes element values, one by one. once this is complete getLocation() is called, with the same number of iterations. getLocation() can now only access the final setting of the elements so only gives one div a map.

总结一下:循环和更改元素值,逐个。一旦完成,就调用getLocation(),迭代次数相同。 getLocation()现在只能访问元素的最终设置,因此只给一个div一个map。

Dean

Update: Sorry to have given incorrect information: it would appear any method call from my loop results in the same behaviour:

更新:很抱歉给出了不正确的信息:从我的循环中出现的任何方法调用都会导致相同的行为:

function pulse(){
     $('#contentDiv').delay(200).fadeOut('slow').delay(50).fadeIn('slow');    
}

Calling this method from my loop:

从我的循环中调用此方法:

for(var i = 1; i < length; i++) {        
    var longitude = 1.8612393999999999;
    var latitude = 50.7263312;

    alert("end of loop");        
    pulse();
}

results in an alert n number of times, then pulse is executed? Sorry for confusion.

导致警报n次,然后执行脉冲?抱歉混淆。

Dean

update: Google maps script:

更新:谷歌地图脚本:

function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  alert($("#longInput").val()); */
  lat= $("#latInput").val();
  lon= $("#longInput").val();
  latlon=new google.maps.LatLng(lat, lon);
  mapholder=theMapholder;

  alert("getLocation " + theMapholder);

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(theMapholder,myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }

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

Using the alert in showPosition I can see that it is only called after the loop has updated the elements.

使用showPosition中的警报我可以看到它仅在循环更新元素后才被调用。

Why would the a function behave like this, and only be called after the loop has executed everything else?

为什么函数的行为与此类似,只有在循环执行了其他所有操作后才能调用?

1 个解决方案

#1

As anyone is aware that reads this it was a little confusing, probably due to needing to learn more and javascript although as you will see in the comments there is some good adivice to learn from for me. Any how my solution to the problem:

任何人都知道读到这一点有点令人困惑,可能是因为需要学习更多和javascript,虽然你会在评论中看到有一些很好的建议可供我学习。任何我如何解决问题的方法:

getLocation() was being itterated, AFTER the loop had completed iterating over all the other code. So as a hack, when the getLocation() method is iterated that was the time make the element value changes that the function could use:

在循环完成迭代所有其他代码之后,getLocation()正在被迭代。所以作为一个hack,当迭代的getLocation()方法是时候使元素值改变,函数可以使用:

  var y=1;
  var x=document.getElementById("demo");

  function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

  function showPosition(position)
  {
    var longitude = -1.8612393999999999;
    var latitude = 50.7263312;

    document.getElementById("longInput").value = longitude;
    document.getElementById("latInput").value = latitude;

    var mapholder = "mapholderM"+y;
    document.getElementById("mapholderValue").value = mapholder;
    theMapholder=document.getElementById(mapholder);

    lat= $("#latInput").val();   
    lon= $("#longInput").val();
    latlon=new google.maps.LatLng(lat, lon);
    mapholder=theMapholder; 
    alert("getLocation " + theMapholder+y);
    y++;

    var myOptions={
      center:latlon,zoom:14,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      mapTypeControl:false,
      navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    };

  var map=new google.maps.Map(theMapholder,myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

Notice the introduction of variable y which increments in value each time the method is called to use in the get element id.

注意引入变量y,每次调用方法在get元素id中使用时,变量y的值都会递增。