Javascript executing out of order

Question

I am making a pathtracer in javascript and I am having a very odd error. This is the relevant section of my code(there is more code beneath it but I don't think it is causing anything. The same outcome occurs if I comment it all out):

<html>
<head>
    <script src="lib/sah.js"></script>
    <script src="lib/BIH.js"></script>
    <script src="lib/Three.js"></script>
    <script src="lib/three.min.js"></script>
    <script src="lib/loaders/OBJMTLLoader.js"></script>
    <script src="lib/loaders/MTLLoader.js"></script>
    <script src="lib/loaders/XHRLoader.js"></script>
    <script src="lib/loaders/Cache.js"></script>

    <script type="text/javascript">
        function Vec(x, y, z) { return new V(x, y, z); }
        function V(x, y, z) { this.x = x; this.y = y; this.z = z; }
        V.add = function (a, b) { return Vec(a.x + b.x, a.y + b.y, a.z + b.z); }   // overriding operators is not possible in JS
        V.sub = function (a, b) { return Vec(a.x - b.x, a.y - b.y, a.z - b.z); }
        V.mud = function (a, b) { return Vec(a.x * b, a.y * b, a.z * b); }
        V.prototype.mult = function (b) { return Vec(this.x * b.x, this.y * b.y, this.z * b.z); }
        V.prototype.norm = function () { var t = this; var il = 1 / Math.sqrt(t.x * t.x + t.y * t.y + t.z * t.z); t.x *= il; t.y *= il; t.z *= il; return t; }
        V.prototype.dot = function (b) { return this.x * b.x + this.y * b.y + this.z * b.z; }
        V.crs = function (a, b) { return Vec(a.y * b.z - a.z * b.y, a.z * b.x - a.x * b.z, a.x * b.y - a.y * b.x); }


        function Element(aabb,material) {
            this.aabb = aabb;
            this.material = material;
        }
        var meshlist = [];

        var elements = [];
        var loader = new THREE.OBJMTLLoader();
        loader.load("lib/CornellBox-Sphere.obj", "lib/CornellBox-Sphere.mtl", meshlist);
        for (k = 0; k < this.meshlist.length; k++) {
            for (l = 0; l < this.meshlist[k].geometry.aabb.length; l++) {
                elements.push(new Element(this.meshlist[k].geometry.aabb[l],meshlist[k].material));
            }
        }

        var bih = new BIH();

I am requesting the loader to load my cornell box data but for some reason it doesn't complete the load until after all of the other code has been executed. When I step through it with a debugger, the loader will parse the file locations but then, instead of actually loading the data into my "meshlist" array, it will jump straight into my for loop which places the meshlist data into my elements array. Since nothing has been loaded into meshlist this obviously doesn't accomplish much. Only after all other code has been executed does the loader pick up where it left off and complete the load into meshlist. What could possibly be causing this? I have no idea. Thanks for your input!

It seems like the loader is asynchronous so you have to wait for the load to complete in order to execute the loop. Look for the load API reference to see if it has a callback. — satchcoder, Feb 04 '15 at 11:55

score 2 · Answer 1 · answered Feb 04 '15 at 12:10

You're facing this problem because of asyncronous nature of loader.load. It makes http request, and while your resources are transfering from server to client the rest of your code executing. As you can see in documentation you need to pass callback function to load method which will be called when your resources finish loading

loader.load("lib/CornellBox-Sphere.obj", "lib/CornellBox-Sphere.mtl", function (obj) {
    // do your resources dependant stuff here
});

Javascript executing out of order

1 Answers1