Question

尝试制作一个简单的小部件。步骤进行：

1）加载jQuery（如果还没有） 2）回调函数

<html>
<head>
    <script type="text/javascript">
    function load(callback){
        console.log('load');
        if (typeof jQuery !== "function") {
            var js = document.createElement("script");
            var he = document.getElementsByTagName('head')[0];
            js.type = "text/javascript";
            js.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
            he.appendChild(js);
            js.addEventListener("load", function () {
                callback();
            });
        }
        else
            {
                callback();
            }
    }


    load(function(){
        chart();
    })


    function chart(){
        $('#chart').html("id : "+Math.random());
    }

    // alert('This alert breaks!');
    </script>
</head>
<body>
    <div id="chart"></div>
</body>
</html>

代码无需警报即可运行。无法理解背景问题

由于

Answer 1

好的，找出问题所在。

您的代码不在DOM就绪处理程序中。

如果警报不存在，它将起作用，因为函数调用是异步的，并且在AJAX完成之前DOM已准备就绪。

但当警报出现时，它会在您的代码中创建一个断点，并且在您单击 ok 之前DOM将无法完成。问题是AJAX请求没有停止。当您单击 ok 时，AJAX将完成并在DOM准备好之前运行回调。

Answer 2

将您的脚本块移出head标记，并将其放在body之前</body>的末尾。

javascript回调上下文问题

2 个答案: