Порядок выполнения javascript и jquery

Question

Я пытаюсь написать код с помощью Javascript/jQuery/API Карт Google.

Однако порядок выполнения в моем скрипте немного странный.

var flats=[]; 
function initialize() { 
    var mapOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(50.062, 19.937), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    /* Puling flats data using my API */ 
    $.getJSON("http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062",parseFlat); 
    function parseFlats(data){ 
    /* I put flats data in format usable by Google maps API */ 
    $.each(data, function(i, item){ 
     flat = []; 
     flat.push('flat_name'); 
     flat.push(parseFloat(item.latitude)); 
     flat.push(parseFloat(item.longitude)); 
     // z-index to display flats on map 
     flat.push(i+1); 
     flats.push(flat); 
    }); 
    console.log("I'm inside the function"); 
    } 
    console.log("activating markers"); 
    setMarkers(map, flats); 
} 

Я думал, что JQuery API вызов будет выполняться до функции setMarkers, но когда я смотрю в поджигатель, порядок отличается:

activating markers 
I'm inside the function 

Что я делаю неправильно? Как я могу убедиться, что часть jQuery выполняется перед функцией setMarkers?

Answer 1

Ваша проблема заключается в асинхронном характере $ .getJSON. Если вам нужно вызвать setMarkers (карты, квартиры) только после того, как parseFlats, назовем его внутри parseFlats

$.getJSON("http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062",parseFlat); 
function parseFlats(data){ 
    /* I put flats data in format usable by Google maps API */ 
    $.each(data, function(i, item){ 
    flat = []; 
    flat.push('flat_name'); 
    flat.push(parseFloat(item.latitude)); 
    flat.push(parseFloat(item.longitude)); 
    // z-index to display flats on map 
    flat.push(i+1); 
    flats.push(flat); 
    }); 
    console.log("I'm inside the function"); 
    console.log("activating markers"); 
    setMarkers(map, flats);  
} 

Другая возможность заключается в использовании $ .ajax с ASYN имущества установлен в ложь (но я не буду рекомендовать его, поскольку браузер блокируется до получения ответа сервера)

$.ajax({ 
    dataType: "json", 
    url: 'http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062', 
    success: parseFlat, 
    async:false 
}); 

Answer 2

Точный порядок выполнения:

1. Присвоить переменной mapOptions
2. Присвоить переменной map
3. Вызов $.getJSON, который посылает запрос AJAX и регистрирует функцию, которая будет вызвана, когда ответ получен.
4. История поиска activating markers
5. Звоните setMarkers().
6. Возврат из функции initialize() в цикл событий браузера.
7. Когда получен ответ AJAX, звоните parseFlats(), в котором регистрируются I'm inside the function.

Помните, что первый A в AJAX означает asynchronous.

Answer 3

Переместите setMarkers внутри на parseFlats, и вы получите заказ, который хотите.