如何跨两个外部 JS 文件同步访问全局变量答案

【问题标题】：How can I synchronize accessing a global var across two external JS files如何跨两个外部 JS 文件同步访问全局变量
【发布时间】：2016-06-19 07:39:24
【问题描述】：

test.html

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src = "./test1.js"></script>
        <script src = "./test2.js"></script>
    </head>
</html>

test1.js

var a;
$(document).ready(function(){
    setTimeout(function(){
        a=10;   
    },1000);
});

test2.js

$(document).ready(function(){
    //Busy waiting... doesn't Work.
    /*while(typeof(a) === "undefined"){
        console.log(a);
    };*/
    console.log(a);
});

test2 打印 'a' is 'undefined'... 如何在两个 javascript 文件上同步“a”？

【问题讨论】：

while(typeof(a) === "undefined"){ console.log(a); }; 从来都不是一个好主意。它会阻塞线程

标签： javascript jquery global-variables prototype synchronize

【解决方案1】：

忙等待不起作用的原因是浏览器上的 JavaScript 只有一个 main 线程，因此忙等待阻止了 test1.js 的代码运行。一般来说，忙碌等待几乎不是一个好主意，在基于浏览器的 JavaScript 中基本上也不是一个好主意。 :-)

理想情况下，这两个文件将提供一种在它们之间进行同步的有意方式。

但是如果没有test2.js 可以使用的事件，并且如果等待a 具有undefined 以外的值是绝对正确的，则可以使用setTimeout 循环：

test2.js:

$(document).ready(function(){
    function checkForA() {
        if (typeof a === "undefined") {
            // Keep waiting
            setTimeout(checkForA, 10); // 50 = 50 milliseconds
        } else {
            // Got it
            console.log(a);
        }
    }

    checkForA();
});

如果可以通过使用来自test1.js 的某种通知来避免这种超时循环，那就更好了；但在最坏的情况下，每 50 毫秒左右轮询一次并不是什么大问题。在某个时候放弃它可能是个好主意：

$(document).ready(function(){
    var started = Date.now();

    function checkForA() {
        if (typeof a === "undefined") {
            // Still don't have it, keep waiting?
            if (Date.now() - start > 10000) { // More than 10 seconds
                // Give up
                console.log("Gave up waiting for a");
            } else {
                setTimeout(checkForA, 10); // 50 = 50 milliseconds
            }
        } else {
            // Got it
            console.log(a);
        }
    }

    checkForA();
});

【讨论】：

如果 test1.js 在 test2.js 之前加载，我希望 a 被定义但 null
@mplungjan, var a; 将创建一个 undefined 变量不是吗？在此特定示例中，a 的值永远不会是 null
啊。对。我从不使用未初始化的变量
@mplungjan：如果test1.js 在test2.js 之前加载，a 将存在，但在test1.js 的就绪处理程序触发之前具有undefined 的值。如果test2.js 在test1.js 之前加载，a 在加载之前根本不存在（当然），但typeof a 不会抛出错误；在这两种情况下我们都会得到"undefined"。
谢谢！但是...有没有办法在javascript中动态绑定变量更改？？

【解决方案2】：

尝试将$(document).ready(function(){替换为$(window).load(function(){，或者你可以使用js window.load=function(){。这将等待所有 html、css 和 js 加载，然后在该函数中执行脚本代码。

【讨论】：

我已经尝试过'ready' test1.js 和'load' test2.js（下面的答案），但没有奏效......