使用 Google Maps API 延迟每个请求的 Ajax 函数答案

【问题标题】：Delay Ajax Function per request with Google Maps API使用 Google Maps API 延迟每个请求的 Ajax 函数
【发布时间】：2018-01-29 10:14:21
【问题描述】：

我想使用 Google Places API 获取有关地点的一些数据。问题是，我想从我正在寻找的地区的每个城市的 1000 多条记录中获取数据。

我正在寻找比萨店，我想要我定义的区域内的所有比萨店。所以我有一个这样的数组：

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




});

我尝试了很多我在 stackoverflow 上找到的解决方案，但没有一个有效，或者我可能做错了。

感谢您的帮助！

【问题讨论】：

I've tried a lot of solutions I found on stackoverflow你试过哪些？
我试过你可以在这里找到的：stackoverflow.com/questions/33395048/set-a-delay-in-ajax-call stackoverflow.com/questions/18965768/…stackoverflow.com/questions/17332976/…stackoverflow.com/questions/40829915/…

标签： javascript jquery ajax google-places-api lodash

【解决方案1】：

$.ajax 返回一个 Promise 的事实使这变得非常简单

首先，您希望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
    });
});

【讨论】：

【解决方案2】：

最有效的答案是上面来自@jaromandaX 的答案。不过，我还找到了一种使用 Google Chrome 的解决方法，它可以帮助您避免被承诺弄脏。

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

Kaboom，正在使用我的初始代码。

尽管如此，我更改了我的代码以适应上述答案，这在代码、速度等方面做得更好。

谢谢

【讨论】：