javascript - 设置超时以减慢 zoom_changed 事件的节奏

Question

我有以下代码:

    google.maps.event.addListener( map, 'dragend', updateBounds );
    google.maps.event.addListener( map, 'zoom_changed', updateBounds );

    function updateBounds() {
      bounds = map.getBounds();
      $.ajax({ url:url, params:{ b:bounds.toUrlValue() } } );
    }

因此，在每次移动/缩放时，坐标都会发送到服务器。

问题是，如果用户进行“2 次单击”- 滚动以更改缩放级别，则会触发 2 个事件并且服务器必须进行双重工作。

我希望客户端“忘记”第一个缩放事件，只发送最后一个。

怎么做？

TIA

Answer 1

您可以按照您的标题所建议的去做...为每个缩放事件设置一个超时，然后在超时完成之前清除它并重置它(如果有另一个缩放事件)，也许像这样:

google.maps.event.addListener( map, 'dragend', updateBounds );
google.maps.event.addListener( map, 'zoom_changed', updateDebounce );

var debounceTimeout;
function updateDebounce() {
     window.clearTimeout(debounceTimeout);
     debounceTimeout = window.setTimeout(updateBounds, 1000);
}

function updateBounds() {
  bounds = map.getBounds();
  $.ajax({ url:url, params:{ b:bounds.toUrlValue() } } );
}