As part of T216198, ImageCarousel.js was refactored to support advancing its own images when one of the navigation controls is clicked (previously OverlayManager instantiated a new instance of ImageCarousel with each navigation control click).
However, this introduced a new problem: If multiple ImageGateway promises happened to resolve while a user is on a slide, multiple images would be inserted into the overlay.
A quick (and not ideal) attempt was made to correct this by creating a closure variable that referenced the current instance's $el element and using this reference when the promise resolves or rejects to perform DOM manipulations. One of the reasons this is bad is because when the promise resolves, it also sets instance variables so we could potentially be overwriting instance variables with incorrect info if multiple promises resolve while on the same slide.
We should probably fix this by making a cancelable promise and canceling the promise with each onSlide in a way that the logic inside the resolve/reject handlers doesn't get a chance to run.
- Only one imageGateway.getThumb resolve handler or only one imageGateway.getThumb reject handler should execute when a user is on any given slide. i.e. if user quickly advances slides and then stops, only one image should appear and not multiple (which could happen if multiple resolve handlers executed)
- The $el closure variable inside the postRender method is removed (let's go back to using (this,$el/self.$el)
Working patch at https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/498998/ . Feel free to modify or discard