延迟以防止对地图拖动进行多个ajax调用

Delay to prevent multiple ajax calls on map dragging

本文关键字：ajax 调用 拖动 地图 延迟      更新时间：2023-09-26

每次缩放或拖动地图时，我都会调用ajax，如下所示：

function initialize(lat, lng) {
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 15,
   };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    google.maps.event.addListener(map, 'zoom_changed', function() {
        getResults(map.getBounds());  
    });
    google.maps.event.addListener(map, 'dragend', function() {
        getResults(map.getBounds());  
    });
};
function getListings(bounds){
 data = {'South_Lat':bounds.getSouthWest().lat(), 'South_Lng':bounds.getSouthWest().lng(), 'North_Lat':bounds.getNorthEast().lat(), 'North_Lng':bounds.getNorthEast().lng()};
 $.ajax({
    type: "POST",
    dataType: 'json',
    url: "<?=$results_url;?>",
    data: data,
    success: function (json) {
        // do something
    }
});
}

然而，有时用户可能会在处理一个调用时继续拖动或缩放。一个例子是，当用户使用鼠标滚轮时，它会在每个缩放步骤上触发zoom_change。

为了防止服务器过载，我想添加1或2秒的延迟，以便在执行ajax之前等待进一步的缩放或拖动。

我如何在这里实现这一点？

使用下划线debounce（或其他库中的等效项）和空闲事件。

var debouncedLoad = _.debounce(getDataFromServer, 2000/*2 seconds*/);
google.maps.event.addListener(map, 'idle', function() {
    debouncedLoad();
});

对于jquery，似乎有一个用于的插件

这是一个报告的错误http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.

建议使用事件"空闲"。

google.maps.event.addListener(map, 'idle', function() {
});
相关文章：