Javascript乱序执行答案

【问题标题】：Javascript executing out of orderJavascript乱序执行
【发布时间】：2015-02-04 20:10:25
【问题描述】：

我正在用 javascript 制作路径跟踪器，但遇到了一个非常奇怪的错误。这是我的代码的相关部分（下面有更多代码，但我认为它不会导致任何问题。如果我将其全部注释掉，也会出现相同的结果）：

<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();

我正在请求加载器加载我的康奈尔盒子数据，但由于某种原因，它直到所有其他代码都已执行后才完成加载。当我使用调试器单步执行它时，加载器将解析文件位置，但随后，它不会将数据实际加载到我的“meshlist”数组中，而是直接跳转到我的 for 循环中，该循环将网格列表数据放入我的元素数组中。由于没有任何东西被加载到网格列表中，这显然没有多大作用。只有在执行完所有其他代码后，加载程序才会从上次中断的地方继续并完成加载到网格列表中。这可能是什么原因造成的？我不知道。感谢您的意见！

【问题讨论】：

加载器似乎是异步的，因此您必须等待加载完成才能执行循环。查找加载 API 参考，看看它是否有回调。

标签： javascript loading raytracing

【解决方案1】：

由于loader.load 的异步性质，您正面临这个问题。它发出 http 请求，当您的资源从服务器传输到客户端时，您的其余代码正在执行。正如您在documentation 中看到的，您需要将callback 函数传递给load 方法，该方法将在您的资源完成加载时调用

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

【讨论】：