Question

的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'是'未定义'... 如何在两个javascript文件上同步'a'？

Answer 1

繁忙等待的原因是浏览器上的JavaScript只有一个主线程，因此忙等待会阻止test1.js的代码运行。繁忙等待通常从来都不是一个好主意，在基于浏览器的JavaScript中基本上不是一个好主意。： - ）

理想情况下，这两个文件将提供一种有意识的方式来同步它们。

但是，如果没有test2.js可以使用的事件，并且等到a的值不是undefined而绝对正确，则可以使用setTimeout } loop：

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

Answer 2

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

如何在两个外部JS文件之间同步访问全局var

2 个答案: