Javascript window.onload不调用函数_Javascript_Html_Requirejs

Javascript window.onload不调用函数

javascript html requirejs

Javascript window.onload不调用函数,javascript,html,requirejs,Javascript,Html,Requirejs,使用此index.html： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script data-main="main" src="require.js"></script> </head> <bo

使用此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>

我希望控制台输出显示：

main.js ran
render ran

“main.js ran”按预期显示，但“render ran”未被记录。渲染函数从未被调用。为什么不呢？

这可能是RequireJS的问题，而且页面已经加载。RequireJS应该已经在等待加载所有文件，所以请使用下面的代码

例如：

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

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

render();

如果尝试等待加载HTML元素，请使用jQuery：

//will run once the page DOM is ready
$(element).ready(function(){
   ...
});

//will run once the entire page is
//loaded including images and iframes
$(element).load(function(){
   ...
});

。因此，页面加载和main.js加载之间存在竞争条件。如果main.js首先完成加载，将设置

window.onload

，您将看到“render run”。如果页面首先完成加载，则不会加载。这两种结果中的哪一种通常是不确定的，但由于您给出的示例页面非常短，它通常会在从服务器获取main.js之前完成加载

如果您希望在页面加载后运行模块，可以在上添加依赖项：

嗯，奇怪。在我看来一切都很好。你如何加载

main.js

？我怀疑您是在加载窗口之后加载它的，所以运行

window.onload

函数已经太迟了。@Bermar，很好，但是如果Vocalionecho链接了错误的javascript文件，为什么main.js ran会出现在控制台中呢。从代码片段中，两个

console.log（）

都在同一个文件中。请尝试添加@NewToJS，这就是为什么我认为问题在于他在

窗口之后加载文件。onload

已运行。

$（元素）。ready（）

与

$（文档）。ready（）

相同。单个元素没有

就绪

事件。如果他使用的是

RequireJS

，那么在加载特定文件后运行函数难道没有它自己的功能吗？这确实有效。对于其他刚接触web编程的人来说，这里有更多的后续内容。问题是在main.js设置window.onload之前，页面已经完成加载。require.js有一个名为domReady的附属工具，允许您设置在DOM完全加载后调用的回调的数量。

//will run once the page DOM is ready
$(element).ready(function(){
   ...
});

//will run once the entire page is
//loaded including images and iframes
$(element).load(function(){
   ...
});

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

define(['domReady!'], function() {
    // ...
});