如何推迟 AJAX 请求之后的最后一行代码？

Question

我有以下代码，它从 php 脚本中获取地址列表，然后向谷歌地图发出 ajax 请求，然后创建标记并更改缩放以适应标记。

var bounds = new google.maps.LatLngBounds();
$.getJSON('/dmvfinder/dmvsearch.php', {zipcode: zipcode, state: state, city: city}, function (addresses) {
	addresses.forEach(function(address){
		$.getJSON('http://maps.googleapis.com/maps/api/geocode/json', {address: address}, function(data){
				var p = data.results[0].geometry.location;
				var latlng = new google.maps.LatLng(p.lat, p.lng);
				var marker = new google.maps.Marker({
					position: latlng,
					map: map
				});
				bounds.extend(latlng);
		});
	});
});
map.fitBounds(bounds);

据我了解，代码的问题是 fitBounds 方法在 ajax 完成之前触发并且“边界”被填充。我怎么可能在这里推迟最后一行代码？

提前谢谢你！

Answer 1

你需要改变两件事

1. 累积来自address.forEach 的所有承诺 - 将其更改为map 并确保为return $.getJSON(..)。这将为您提供一系列延迟。
2. 使用 $.when 等待它们全部完成 - 因为这需要参数，而不是数组，您可以在 1) 的数组上使用 $.when.apply(..)

像这样：

var bounds = new google.maps.LatLngBounds();
$.getJSON('/dmvfinder/dmvsearch.php', {zipcode: zipcode, state: state, city: city}, function (addresses) {
    // 1. Accumulate all the promises into an array
    var allPromises = addresses.map(function(address){
        return $.getJSON('http://maps.googleapis.com/maps/api/geocode/json', {address: address}, function(data){
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            bounds.extend(latlng);
        });
    });
    // 2. wait for them all to complete
    $.when.apply($,allPromises).then(function(){
      map.fitBounds(bounds);
    })
});