Retard Ajax Fonction par demande avec l'API Google Maps

Question

Je souhaite obtenir des informations sur les lieux utilisant l'API Google Adresses. Il est, je veux obtenir des données de plus de 1000 enregistrements, par ville de la région que je cherche.

Je cherche une pizzeria, et je veux toutes les pizzerias de la région que j'ai définies. J'ai donc un tableau comme celui-ci:

['Pizzeria+Paris','Pizzeria+Marseille','Pizzeria+Nice','Pizzeria+Toulouse'] 

Mon objectif est de faire une demande unique, puis attendre 3 secondes (ou plus), et traiter ensuite la deuxième demande. J'utilise la bibliothèque Lodash pour m'aider à itérer.

Voici mon code:

function formatDetails(artisan){ 
    var latitude = artisan.geometry.location.lat; 
    var longitude = artisan.geometry.location.lng; 
    var icon = artisan.icon; 
    var id = artisan.id; 
    var name = artisan.name; 
    var place_id = artisan.place_id; 
    var reference = artisan.reference; 
    var types = artisan.types.toString(); 

    $('#details').append('<tr>'+ 
    '<td>'+latitude+'</td>'+ 
    '<td>'+longitude+'</td>'+ 
    '<td>'+icon+'</td>'+ 
    '<td>'+id+'</td>'+ 
    '<td>'+name+'</td>'+ 
    '<td>'+place_id+'</td>'+ 
    '<td>'+reference+'</td>'+ 
    '<td>'+types+'</td>'+ 
    '</tr>'); 
} 

var getData = function(query, value){ 
$.ajax({ 
     url: query, 
     type: "GET", 
     crossDomain: true, 
     dataType: "json", 
     success: function(response) { 
     var artisan = response.results; 
     console.log(artisan); 
     for (var i = 0; i < artisan.length; i++){ 
      formatDetails(artisan[i]); 
      setTimeout(function(){console.log('waiting1');},3000); 
     } 
     setTimeout(function(){console.log('waiting2');},3000); 
     },error: function(xhr, status) { 
     console.log(status); 
     }, 
     async: false 
    }); 
} 




$(document).ready(function(){ 

var places = 
['Pizzeria+Paris','Pizzeria+Marseille','Pizzeria+Nice','Pizzeria+Toulouse']; 

    _.forEach(places, function(value, key) { 
    var proxy = 'https://cors-anywhere.herokuapp.com/'; 
    var target_url = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query='+value+'&key=AIzaSyAClTjhWq7aFGKHmUwxlNUVBzFpIKTkOrA'; 
    var query = proxy + target_url; 
    getData(query, value); 
    }); 




}); 

J'ai essayé beaucoup de solutions que je trouve sur stackoverflow, mais personne ne travaillaient, ou je aurais pu faire les mauvais.

Merci pour votre aide!

Answer 1

Le fait que $.ajax renvoie une promesse en fait assez simple

Tout d'abord, vous voulez getData revenir $.ajax - et aussi se débarrasser de async:false

var getData = function(query, value) { 
    return $.ajax({ 
     url: query, 
     type: "GET", 
     crossDomain: true, 
     dataType: "json", 
     success: function(response) { 
      var artisan = response.results; 
      for (var i = 0; i < artisan.length; i++){ 
       formatDetails(artisan[i]); 
      } 
     },error: function(xhr, status) { 
      console.log(status); 
     } 
    }); 
} 

Ensuite, vous pouvez utiliser Array.reduce itérer à travers le tableau, et pour enchaîner les demandes, avec un "retard" de 3 secondes après chaque requête

Comme ceci:

$(document).ready(function(){ 
    var places = ['Pizzeria+Paris','Pizzeria+Marseille','Pizzeria+Nice','Pizzeria+Toulouse']; 
    places.reduce((promise, value) => { 
     var proxy = 'https://cors-anywhere.herokuapp.com/'; 
     var target_url = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query='+value+'&key=AIzaSyAClTjhWq7aFGKHmUwxlNUVBzFpIKTkOrA'; 
     var query = proxy + target_url; 
     return promise.then(() => getData(query, value)) 
      // return a promise that resolves after three seconds 
     .then(response => new Promise(resolve => setTimeout(resolve, 3000))); 
    }, Promise.resolve()) /* start reduce with a resolved promise to start the chain*/ 
    .then(results => { 
     // all results available here 
    }); 
}); 

Answer 2

La réponse la plus efficace est celle de @jaromandaX. Néanmoins, j'ai également trouvé une solution de contournement avec Google Chrome, qui vous aidera à ne pas vous salir les mains avec des promesses.

On Chrome:
1. Ouvrez Console
2. Allez au réseau onglet
3. Près des options de « préserver journal » et « cache désactiver », vous avez une option avec une flèche où vous verrez la étiquette "Pas d'étranglement".
4.Cliquez sur la flèche en regard de l'étiquette, puis ajoutez.
5. Vous serez en mesure de définir une vitesse de téléchargement et de téléchargement, et le plus important, un délai entre chaque demande. Kaboom, en travaillant avec mon code initial.

Néanmoins, j'ai changé mon code pour adapter la réponse ci-dessus, ce qui est mieux à faire, en termes de code, vitesse, etc ..

Merci