How to prevent race conditions when switching between cameras

I have a scene with multiple cameras.
At each point in time the user can select a camera, and pan/zoom/rotate the camera.
The cameras share one orbit control object.
The orbit control object has multiple event listeners: onMouseMove, onMouseWheel, etc…

When a camera is selected, the camera in the orbit control object is set to the selected camera.
But with this architecture, I’m running into race conditions.

Consider the following use case:

  1. Camera1 is selected. is set to camera1
  2. the user changes the zoom by scrolling the mouse, which triggers onMouseWheel to set the zoom for camera1.
  3. During the calculation of, Camera2 is selected, which sets to camera2
  4. The calculation of the completes and the zoom is applied to the wrong camera (camera2 instead of camera1)

I can think of these solutions:

  1. Introduce a mutex. I found some links related to using mutex in Javascript e.g. here, here, and here
    I’m concerned that this approach will hurt the performace. Locking every function that is linked to event listener, and the orbitControl update function for every animation may result in poor user experience.

  2. Have a separate orbit control for each camera.
    As I understand, unlike e.g. C++ having multiple instances of an object in Javascript, means that the entire content of the object, including all functions, is duplicated for each instance.
    Since I have hundreds of camera objects, I’m concerned that this will bloat up the memory.

I would appreciate getting your opinion on how to solve the race condition:

  • Does the current architecture, of multiple cameras sharing a single orbit control object, sound logic to you?
  • Would you suggest having separate orbit control object for every camera?
  • Do you have other suggestion on how to organize the objects?


How long does it take to perform this zoom calculation that there is enough time for the user to select a new camera before it’s complete?