Window Resize Event, and Add and Clear Google Map Markers

Question

I'm running into an issue on Chrome in Windows 10 when initializing a sequence of functions, which is initially triggered by the window resize event. The sequence of events can be summarized as such:

1. The window resize event calls
2. initializeMap() which calls
3. codeAddress() which calls
4. retrieveAndCompareBounds() which calls
5. clearMarkers() which calls
6. dropMarkers() which calls
7. dropMarkersWithTimeout()

The code works fine unless somebody either (a) manually resizes the browser or (b) presses the shrink browser button since both of those "events" always trigger at least two window resize events in quick succession, whereby duplicate markers are somehow added to the array of markers after the clearMarkers() clears the markers from the map and then empties the array.

I'd thought of a couple solutions, which were:

• I moved clearMarkers() above dropMarkers() in the hierarchy, which did not appropriately address the issue because the event was being fired at least twice in quick succession.
• Splitting the sequence of functions between retrieveAndCompareBounds() and clearMarkers(), and then adding the event listener map.addListener('idle', clearMarkers), which has the same erroneous effect because it seems multiple Google Map idle events are fired.
• In desperation I tried using the onmouseup event, which obviously cannot be detected outside of the window.

In my search for a solution I have read about debouncing and throttling the resize event. Debouncing — about which more info can be found here — appeared to be the solution. However, although implementing debouncing certainly improves issue by a large extent, the issue still persits if one resizes the browser after the debounce function is called but before dropMarkers() / dropMarkersWithTimeout() have completed.

I'm wondering if there is an actual solution to this issue nowadays?

P.S. I haven't included the code because it's quite extensive. Despite that, I will gladly post the code, or a compressed version thereof, if somebody requests that I do so.

Answer 1

So guess you've identified two issues...

1. Too many function calls on resize

2. Synchronicity

You're right about debounce, you can use something like resizilla to manage this, it also helps with the change of orientation in mobile that also triggers window resize.

To keep the function calls in order you can use a promises lib such as RSVP. You may need to rebuild your functions to return arguments to be passed down to the next 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);
}),
...

You can use setImmediate or setTimeout(fn,0) within the "Promise" as a timing function wrapper.