Estoy haciendo una aplicación. La aplicación hace dos solicitudes, la primera es a la API de MapBox para cargar un mapa y la segunda es a la API de Yelp Fusion (a través de mi servidor de nodos). En las pruebas de aceleración, descubrí que MapBox Call tarda aproximadamente la mitad del tiempo en completarse que Yelp Call.
Estoy un poco confundido sobre cómo administrar las dos solicitudes. ¿Cargo uno y luego el siguiente? ¿Los cargo a ambos y luego creo dos funciones de entrada para tener en cuenta la carga de Yelp primero/la carga de MapBox primero?
Así es como mi código está estructurado actualmente:
// -------------------------- // Yelp API Call // ------------------------- // $.ajax({ type: 'POST', data: { "food_type": getParameterByName('type', window.location.href), "geolocation": false, "long": -1, "lat": -1, "radius": 1000, "limit": 30 }, success: function(response) { YelpCallback(response); }, error: function(xhr) { console.log("Failure"); console.log(xhr) }, url: POST_baseurl + "yelp" }); // -------------------------- // MapBox API Call // ------------------------- // mapboxgl.accessToken = 'pk.<accesstoken>.<accesstoken>'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/jeremysmorgan/<mapstyle url>', center: [lat, long], zoom: 13 }); map.on('load', function(e) { var map_load_time = new Date().getTime() - map_start_time; console.log("map_load_time: " + map_load_time); MapCallback(e); }); function YelpCallback(data) { yelp_loaded = true; yelp_data = data; if (map_loaded) { main(); } } function MapCallback(e) { map_loaded = true; if (YelpCallback) { main(); } }Algo como esto debería funcionar. Lea sobre las devoluciones de llamada (las adecuadas), son muy útiles.http://cwbuecheler.com/web/tutorials/2013/javascript-callbacks/
function YelpAjax(callback) { $.ajax({ //yelp request, success: function(response){ callback(response); //once done, call this argument with parameter: response } }); } map.onload('load', function(e){ //same stuff YelpAjax(function(response){ //this anonymous function is the argument. main(); }) }) Contenga su solicitud de Yelp AJAX en una función con una devolución de llamada. Ponga esta función en map.onload . Llame a main() después.
Efectivamente, es como poner main() dentro de su éxito de Ajax, pero con menos anidamiento literal.
$.ajax({ //yelp request, success: function(response){ main(); } });También puede probar la biblioteca asíncrona que le permite controlar las funciones asíncronas de manera muy elegante, pero es posible que deba repasar primero antes de abordar algo así. http://caolan.github.io/async/