javascript - 从包含的 JS 文件访问全局变量

Question

我想从包含的 JS 文件访问全局变量。是的，我看到，我不是第一个遇到这个问题的人，但这里的答案对我没有用。我在代码中写了一些注释，描述了我的问题。

主要.js

var drawing_area;
var renderer;
var camera;
var tableTop;
var scene;

var OBJECT3D = {}; // the global namespace

var texture_path = "/images/materials/texture_1.jpg";
var texture;


$(function() {

    // get the product-identifier via URL
    OBJECT3D.productIdentifier = document.URL.split('/').pop();


    // get all default values from select-elements and store them in a global hash
    OBJECT3D.defaultValues = {};
    $('select').each(function() {
        var selectedOption = $(this).find('option:selected');
        OBJECT3D.defaultValues[$(this).data('identifier')] = selectedOption.text();
    });


    /*
     *  ####################################################
        *  SET ALL DEFAULT VALUES DEPENDING ON THE PRODUCT *
     *  ####################################################
     *  
     *  import custom js-code via <script> - Tag   
     *
     */
    var script_values_setter   = document.createElement("script");
    script_values_setter.type  = "text/javascript";


    switch (OBJECT3D.productIdentifier) {

        case "product_01":
            script_values_setter.src   = "/javascripts/3D_models/default_values_setters/product_01.js"; // include js-File
            document.body.appendChild(script_values_setter); // append it to the DOM

            break;
        // ...
        default:
            break;
    }

// try to access the length, which i set in product_01.js, but it's undefined, so i can't use it
console.log("length-value: "+OBJECT3D.lengthProduct01);

// ... some other stuff for what i need the values of the product_01.js - File



});

product_01.js

// in here i can access the global variable OBJECT3D.defaultValues without any problems ...
$.each(OBJECT3D.defaultValues, function(key, value) {
        switch (key) {
            case "laenge":
                // here i set the length in a global var
                OBJECT3D.lengthProduct01 = value.replace(/[A-Za-z$-]/g, "")*10; 
                break;
            case "breite":
                OBJECT3D.widthProduct01 = value.replace(/[A-Za-z$-]/g, "")*10;
                break;
            default:
                break;
        }
    });

所以问题是在 product_01.js - 文件中设置值后我无法访问 OBJECT3D.lengthProduct01。拜托，我需要一些帮助!这已经花费了我很多时间! :(

谢谢!

Answer 1

JavaScript 是单线程环境。当您执行 document.body.appendChild(script_values_setter); 脚本时，脚本会添加到 DOM，但直到当前脚本结束才会被处理。 然后，当您的程序到达 OBJECT3D.lengthProduct01 行时，该值未设置。您必须先结束您的脚本，为另一个脚本留出一些时间，然后您才能访问 OBJECT3D.lengthProduct01 属性。你应该尝试这样的事情:

// invoke function later (in 1ms)
// During the wait phase JS engine will grant a processor time to another scripts (timer functions, callbacks for events, etc.)
window.setTimeout(function() {
    // try to access the length, which i set in product_01.js - this should works
    console.log("length-value: "+OBJECT3D.lengthProduct01);

    // ... some other stuff for what i need the values of the product_01.js - File
}, 1);

此示例无法正常工作，因为等待限制太小，适当的值(不能太小也不能太高)取决于连接。您可以使用 10000 毫秒或类似的时间进行测试，它几乎总是有效，但它太长了。

更好的解决方案是使用 jQuery 函数 getScript而不是 setTimeout。

    ...
    switch (OBJECT3D.productIdentifier) {
        case "product_01":
            // append js-File to the DOM
            $.getScript("/javascripts/3D_models/default_values_setters/product_01.js", function() {
                // try to access the length, which i set in product_01.js - this should works
                console.log("length-value: "+OBJECT3D.lengthProduct01);

                // ... some other stuff for what i need the values of the product_01.js - File
            });
            break;
        // ...
        default:
            break;
    }
    // nothing here - the code is moved to getScript callback function
});

这是我的工作示例 http://ulozto.net/xSprWGU8/load-script-zip