Race condition in component updates

[bryik]

Rapidly changing the folder property causes unpredictable behaviour.

<a-scene>
  <a-entity id="skybox" cubemap="folder: /assets/Yokohama3/"></a-entity>
</a-scene>
<script type="text/javascript">
  setTimeout(changeBackground, 2000);

  function changeBackground() {
    let skybox = document.querySelector("#skybox");
    skybox.setAttribute("cubemap", "folder: /assets/GoldenGateBridge2/");
    skybox.setAttribute("cubemap", "folder: /assets/Yokohama3/");
    // Which cubemap will be displayed?
  }
</script>

The cubemap that ultimately gets displayed depends on the order texture load callbacks are executed which is random. It is quite easy to end up in situations where component data is inconsistent with the displayed texture:

In the above, /assets/GoldenGateBridge2/" is displayed, but data.folder is "/assets/Yokohama3/".

Proposed fix

The texture load callback is closed over the original folder path it was called to load (srcPath) and can be given access to the current component data by binding this. By comparing past and current folder paths, the texture load callback can figure out what to do.

// Within the texture load callback
if (srcPath !== this.data.folder) {
  // The texture that just finished loading no longer matches the folder
  // set on this component.
  texture.dispose();
  return;
}
// The folder property has not changed, so go ahead with the texture update.