Zoom plugin creates subscription issues which makes working with long audio files laggy

[gustavsollenius]

I've had issues with the zoom plugin regarding scrolling events aswell with the timeline plugin. When zooming into an audio file, the scroll event registers correctly, but zooming further causes issues.

reRender() and render() are expected to fire consecutively, followed by a requestAnimationFrame() which triggers a scroll event subscription in the draw method. However, as I zoom in further, reRender() fires more quickly than the first requestAnimationFrame() can complete (likely due to the 60Hz screen refresh rate at 16ms intervals). This causes two requetAnimationFrames to stack up, in turn causing scroll events to stack up aswell as two draw calls happen back-to-back, bypassing the unsubscribe logic in reRender(). This leads to multiple scroll events being subscribed without removal, ultimately causing lag as the scroll events repeatedly trigger redraws.

To address this, I added this patch:

if(this.requestID){
  cancelAnimationFrame(this.requestID)
}
this.requestID = requestAnimationFrame(() => ...

This smoothed out the zooming as it prevented the build up of scroll subscriptions. However, with larger audio files, lag persists due to repeated event subscriptions in inside the timeline plugin on each re-render, which aren’t removed.

Should i add this as a bug? If so, any suggestions on handling this event buildup?

[katspaugh]

Thanks for the analysis! Please do create a pull request!