使用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功能

回答

相關問題