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

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()完成之前调整浏览器大小，问题仍然存在。

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

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

Answer 1

所以你猜你已经确定了两个问题......

1. 调整大小的函数调用太多

2. Synchronicity

你对去抖是正确的，你可以使用像resizilla这样的东西 为了解决这个问题，它还有助于改变移动设备中的方向，同时触发窗口调整大小。

要按顺序保留函数调用，您可以使用promises lib，例如RSVP。您可能需要重建函数以返回要传递给下一个thenables的参数：

$scope.event

你可以在＆＃34; Promise＆＃34;中使用setImmediate或setTimeout（fn，0）。作为计时函数包装器。