window.onload没有调用函数

voc*_*cho 5 html javascript requirejs

使用此index.html:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script data-main="main" src="require.js"></script>
    </head>
    <body>
        <p>This is the body</p>
        <canvas id="canvas1"></canvas>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

而这个main.js

console.log("main.js ran");

function render() {
    console.log("render ran");
}

window.onload = render;
Run Code Online (Sandbox Code Playgroud)

我希望控制台输出显示:

main.js ran
render ran
Run Code Online (Sandbox Code Playgroud)

"main.js run"按预期显示,但"render ran"未记录.渲染函数永远不会被调用.为什么不?

rad*_*aph 9

RequireJS data-main异步加载脚本.因此,页面加载和main.js加载之间存在竞争条件.如果main.js首先完成加载,window.onload将设置并且您将看到"render ran".如果页面首先完成加载,则不会.发生这两种结果中的哪一种通常是不确定的,但由于您给出的示例页面非常短,因此通常在从服务器获取main.js之前完成加载.

如果希望模块在页面加载后运行,则可以在domReady模块上添加依赖项:

<script src="require.js"></script> <!-- note, no 'data-main' -->
<script>require( ['main'], function() {} );</script>
Run Code Online (Sandbox Code Playgroud)

main.js:

define(['domReady!'], function() {
    // ...
});
Run Code Online (Sandbox Code Playgroud)