窗口调整大小事件，以及添加和清除谷歌地图标记

Question

在初始化一系列函数时，我在 Windows 10 中的 Chrome 上遇到了一个问题，该函数最初是由窗口调整大小事件触发的。事件的顺序可以总结如下：

1. 窗口调整大小事件调用
2. initializeMap()哪个调用
3. codeAddress()哪个调用
4. retrieveAndCompareBounds() 调用
5. clearMarkers()哪个调用
6. dropMarkers() 调用
7. dropMarkersWithTimeout()

代码运行良好除非有人(a) 手动调整浏览器大小 或(b) 按下缩小浏览器按钮，因为两者这些“事件”总是快速连续触发至少两个窗口调整大小事件，从而以某种方式将重复的标记添加到标记数组中在clearMarkers() 从地图中清除标记然后清空数组.

我想到了几个解决方案，它们是：

• 我在层次结构中将clearMarkers() 移到dropMarkers() 上方，这没有适当地解决问题，因为该事件至少连续快速触发了两次。
• 在retrieveAndCompareBounds() 和clearMarkers() 之间拆分函数序列，然后添加事件侦听器map.addListener('idle', clearMarkers)，这具有相同的错误效果，因为似乎触发了多个Google Map idle 事件。
• 无奈之下，我尝试使用onmouseup 事件，显然无法在窗口外检测到。

在寻找解决方案的过程中，我读到了 debouncing and throttling 的 resize 事件。去抖——可以找到更多信息here——似乎是解决方案。但是，虽然实现去抖动确实在很大程度上改善了问题，但如果在调用去抖动函数之后 dropMarkers() / dropMarkersWithTimeout() 完成之前调整浏览器大小，问题仍然存在。

我想知道现在这个问题是否有实际的解决方案？

附：我没有包含代码，因为它非常广泛。尽管如此，如果有人要求我这样做，我很乐意发布代码或其压缩版本。

Answer 1

所以猜你已经发现了两个问题......

1. 调整大小时调用的函数过多

2. 同步性

你是对的去抖动，你可以使用类似resizilla 为了解决这个问题，它还有助于改变移动设备中的方向，这也会触发窗口调整大小。

为了保持函数调用的顺序，您可以使用 promises 库，例如 RSVP。您可能需要重新构建函数以返回要传递给下一个 thenables 的参数：

var p1 = new Promise(function(resolve, reject) {
  setImmediate(function(){
     resolve(initializeMap());
  });
  // or
  // reject ("Error!");
});

p1.then(function(value) {
  return codeAddress(value); // the return of initializeMap
}, function(value) {
  return retrieveAndCompareBounds(value);
}),
...

您可以在“Promise”中使用 setImmediate 或 setTimeout(fn,0) 作为计时函数包装器。