Synchroniczne wywołanie funkcji w pętli Opcje

[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 :

[PHP] pobierz, plaintext 
    for (index = 0; index < 2; ++index) {
            var id = $(a[index]).find('div.map');         
            mapaStart(id.attr('id'),  id.attr('address'));                  
    }
[PHP] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
function mapaStart(id, address)  
{          
        var wspolrzedne = new google.maps.LatLng(53.429805, 14.537883);
        var opcjeMapy = {
            zoom: 13,
            center: wspolrzedne,
            disableDefaultUI: true
        };
        mapa = new google.maps.Map(document.getElementById(id), opcjeMapy);  
        console.log('adres kodowania ' + address);
        geokoder.geocode({address: address}, obslugaGeokodowania);
}  
function obslugaGeokodowania(wyniki, status)
{
        if(status == google.maps.GeocoderStatus.OK)
        {
            console.log('status = ok');
            mapa.setCenter(wyniki[0].geometry.location);
            var marker = new google.maps.Marker(
                {
                    map: mapa, 
                    position: 	wyniki[0].geometry.location,
                }
            );
        }
}
[PHP] pobierz, plaintext 

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);

Ten post edytował Micchaleq 21.12.2013, 11:40:09

[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ę.

[PHP] pobierz, plaintext 
 
run(function(){
 
    console.log("zainicjowano wszystkie punkty");
    });
 
 
function run(callback) {
                        //tablica z kolejnymi funkcjami do wykonania
    var fnToExec = [];
 
    for (index = 0; index < 2; ++index) {
 
                        //funkcja natychmiastowa, towrzy nowy scop którym kopiujemy stan licznika
        (function(indexCopy){
 
                        //indexCopy - zmienna w której kopię licznika
 
            fnToExec.push(function(funcEnd){
 
                var id = $(a[indexCopy]).find('div.map');         
                mapaStart(id.attr('id'),  id.attr('address'), funcEnd);
                });
 
            }(index));
        }
 
                //wykonanie kolejnych funkcji (pseudo synchronicznie)
    execList();
 
    function execList() {
 
        if (fnToExec.length === 0) {
            callback();
            return;
            }
 
        fnToExec.shift()(execList);
        }
    }
 
 
function mapaStart(id, address, callbackReady) {          
 
    var wspolrzedne = new google.maps.LatLng(53.429805, 14.537883);
    var opcjeMapy = {
        zoom: 13,
        center: wspolrzedne,
        disableDefaultUI: true
        };
 
    mapa = new google.maps.Map(document.getElementById(id), opcjeMapy);  
    console.log('adres kodowania ' + address);
    geokoder.geocode({address: address}, obslugaGeokodowania);
 
    function obslugaGeokodowania(wyniki, status) {
 
        if(status == google.maps.GeocoderStatus.OK) {
 
            console.log('status = ok');
            mapa.setCenter(wyniki[0].geometry.location);
            var marker = new google.maps.Marker({
                map: mapa, 
                position: 	wyniki[0].geometry.location,
                });
            }
 
        callbackReady();
        }
    }  
[PHP] pobierz, plaintext