Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Synchroniczne wywołanie funkcji w pętli
Forum PHP.pl > Forum > XML, AJAX
Micchaleq
Witam serdecznie,

Mam pewien problem, na stronie umieszczam automatyczną mapę poprzez google API do adresu dla każdej z lokalizacji.

Problem zaczyna się jednak gdy mam dwa adresy i zanim zakończy się ładowanie pierwszego ładuje się już kolejny i ucieka jakby jedna operacja.

Mój kod w skrócie wygląda tak :
  1. for (index = 0; index < 2; ++index) {
  2. var id = $(a[index]).find('div.map');
  3. mapaStart(id.attr('id'), id.attr('address'));
  4. }


następnie funkcja mapaStart zawiera odwołanie do kolejnej funckji

  1. function mapaStart(id, address)
  2. {
  3. var wspolrzedne = new google.maps.LatLng(53.429805, 14.537883);
  4. var opcjeMapy = {
  5. zoom: 13,
  6. center: wspolrzedne,
  7. disableDefaultUI: true
  8. };
  9. mapa = new google.maps.Map(document.getElementById(id), opcjeMapy);
  10. console.log('adres kodowania ' + address);
  11. geokoder.geocode({address: address}, obslugaGeokodowania);
  12. }
  13. function obslugaGeokodowania(wyniki, status)
  14. {
  15. if(status == google.maps.GeocoderStatus.OK)
  16. {
  17. console.log('status = ok');
  18. mapa.setCenter(wyniki[0].geometry.location);
  19. var marker = new google.maps.Marker(
  20. {
  21. map: mapa,
  22. position: wyniki[0].geometry.location,
  23. }
  24. );
  25. }
  26. }


i w tym przypadku funckja obslugaGeokodowania wykonuje się tylko raz.
Czy mozna w js jakoś zatrzymać działanie funkcji do momentu aż uzyska się zakończenie obsługi Geokodowania?

Jak wspomniałem więc głównie problem stwarza mi ta funkcja :
geokoder.geocode({address: address}, obslugaGeokodowania);
PrinceOfPersia
Znany problem, na ktory jest na szczescie rozwiazanie. Wygoogluj: promise pattern javascript, a potem skorzystaj ze swojej ulubionej biblioteki ktora obsluguje promisy.
szagi3891
Możesz to zrobić tak. To jest szkic programu (nietestowany) mający pokazać ideę.

  1.  
  2. run(function(){
  3.  
  4. console.log("zainicjowano wszystkie punkty");
  5. });
  6.  
  7.  
  8. function run(callback) {
  9. //tablica z kolejnymi funkcjami do wykonania
  10. var fnToExec = [];
  11.  
  12. for (index = 0; index < 2; ++index) {
  13.  
  14. //funkcja natychmiastowa, towrzy nowy scop którym kopiujemy stan licznika
  15. (function(indexCopy){
  16.  
  17. //indexCopy - zmienna w której kopię licznika
  18.  
  19. fnToExec.push(function(funcEnd){
  20.  
  21. var id = $(a[indexCopy]).find('div.map');
  22. mapaStart(id.attr('id'), id.attr('address'), funcEnd);
  23. });
  24.  
  25. }(index));
  26. }
  27.  
  28. //wykonanie kolejnych funkcji (pseudo synchronicznie)
  29. execList();
  30.  
  31. function execList() {
  32.  
  33. if (fnToExec.length === 0) {
  34. callback();
  35. return;
  36. }
  37.  
  38. fnToExec.shift()(execList);
  39. }
  40. }
  41.  
  42.  
  43. function mapaStart(id, address, callbackReady) {
  44.  
  45. var wspolrzedne = new google.maps.LatLng(53.429805, 14.537883);
  46. var opcjeMapy = {
  47. zoom: 13,
  48. center: wspolrzedne,
  49. disableDefaultUI: true
  50. };
  51.  
  52. mapa = new google.maps.Map(document.getElementById(id), opcjeMapy);
  53. console.log('adres kodowania ' + address);
  54. geokoder.geocode({address: address}, obslugaGeokodowania);
  55.  
  56. function obslugaGeokodowania(wyniki, status) {
  57.  
  58. if(status == google.maps.GeocoderStatus.OK) {
  59.  
  60. console.log('status = ok');
  61. mapa.setCenter(wyniki[0].geometry.location);
  62. var marker = new google.maps.Marker({
  63. map: mapa,
  64. position: wyniki[0].geometry.location,
  65. });
  66. }
  67.  
  68. callbackReady();
  69. }
  70. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.