使用Google Maps API每次请求延迟Ajax功能

我想使用Google Places API获取有关地点的一些数据。事情是，我想从我要查找的地区的每个城市获得超过1000条记录的数据。使用Google Maps API每次请求延迟Ajax功能

我正在寻找匹萨店，而且我想要我定义的区域中的所有匹萨店。所以，我有一个阵列是这样的：

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

我的目标是使单个请求，然后等待3秒（或更多），然后处理所述第二请求。我正在使用Lodash库来帮助我迭代。

这里是我的代码：

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




});

我已经尝试了很多解决方案我在计算器发现，但没有一个人的工作，否则我可能会做他们错了。

感谢您的帮助！

来源

2017-08-21 yofisim

'我已经尝试了很多我在stackoverflow上找到了哪些解决方案？ –

我试过你可以在这里找到： https://stackoverflow.com/questions/33395048/set-a-delay-in-ajax-call https://stackoverflow.com/questions/18965768/set-a-延迟重复-jquery-ajax-function https://stackoverflow.com/questions/17332976/delay-in-ajax-success-not-working https：// stackoverflow。com/questions/40829915/i-want-to-delay-jquery-ajax-successful- – yofisim

是$.ajax回报承诺使得这个很简单

首先，你要getData返回$.ajax的事实 - 也摆脱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); 
     } 
    }); 
}

然后，您可以使用Array.reduce迭代通过阵列，并将请求链接在一起，在每个请求之后具有3秒“延迟”

像这样：

$(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 
    }); 
});

来源

2017-08-22 01:54:04

这就像一个魅力！谢谢！！ – yofisim

最有效的答案是@jaromandaX上面的答案。尽管如此，我还发现了Google Chrome的一种解决方法，它可以帮助您在承诺时不会弄脏自己的手。

在Chrome：
1.打开控制台
2.进入网络选项卡
3.近选项“保存日志”和“禁用缓存”，你有带箭头的选项，你会看到标签“不节流”。
4.单击标签旁边的箭头，然后添加。
5.您将能够设置下载和上传速度，并且最重要的是，在每个请求之间延迟。

Kaboom，使用我的初始代码。

尽管如此，我改变了我的代码，以适应上面的回答，这是好做，在代码中，速度等方面..

感谢

来源

2017-08-22 10:41:54 yofisim

使用Google Maps API每次请求延迟Ajax功能

回答

相关问题