Question

我使用jQuery中的$（document）.ready函数。似乎我不能直接用它来调用函数。我无法弄清楚为什么。当我尝试使用getElementById找到画布时，它会出错。

这有效：

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
<script type="text/javascript">
var test="this is a test";
var canvas;
var ctx;

$(document).ready( function(){ 
    init(); 
}); 

function init() {               
    console.log (test);
    canvas=document.getElementById('canvas');
    ctx = canvas.getContext('2d');      
}

</script>

</head>

<body>
<div>
<canvas id="canvas" width="300" height="300">
    No HTML5 support.
</canvas>       
</div>
</body>

</html>

这也有效：

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
<script type="text/javascript">
var test="this is a test";
var canvas;
var ctx;

$(document).ready(function(){               
    console.log (test);
    canvas=document.getElementById('canvas');
    ctx = canvas.getContext('2d');      
}); 


</script>

</head>

<body>
<div>
<canvas id="canvas" width="300" height="300">
    No HTML5 support.
</canvas>       
</div>
</body>

</html>

但这会产生错误......

<!DOCTYPE html>
<html>
<head>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.js" ></script>
<script type="text/javascript">
var test="this is a test";
var canvas;
var ctx;

$(document).ready(init()); 

function init() {               
    console.log (test);
    canvas=document.getElementById('canvas'); // <= Error here!
    ctx = canvas.getContext('2d');      
}


</script>

</head>

<body>
<div>
<canvas id="canvas" width="300" height="300">
    No HTML5 support.
</canvas>       
</div>
</body>

</html>

亲切的问候！

Answer 1

就在这一行：

$(document).ready(init());

您实际上是立即调用init函数并将其结果作为参数传递给ready-function。由于此行在DOM准备就绪之前执行，因此init函数失败。

您想改为：

$(document).ready(init);

也就是说，将实际的init函数传递给ready-function而不是它的结果。

Answer 2

您应该尝试不()这样的$(document).ready(init);

Answer 3

解决方案取决于您希望如何使用init()功能。

$(document).ready的语法是：$(document).ready(callBackFunction);

这意味着您必须提供回调，即：

一个函数对象，作为一个对象，它必须写成没有“（）”括号（如上面的定义），因为我们不是“召唤”它以执行它！相反，我们为.ready()提供了函数的引用，因此JQuery的.ready()内部代码可以“查找”并自行调用函数
或function() {..somecode..}形式的匿名函数，位于.ready(...)内。

你做的是提供一个函数调用，这就是为什么它不起作用：你没有提供一个函数，但在某种意义上，函数的“结果”是最多的时间不一个函数对象（但是变量，或者如果return语句不存在则未定义）。

因此，如果init()打算成为ready（）回调的完全替代，那么就这样做：

$(document).ready(init); // we're passing an object now not a "result" of
                         // a function, so no "()" needed

如果您希望稍后添加其他操作以执行init()以外的其他操作，请调用init()（请记住调用 - ＆gt;括号，如前所述）一个匿名函数：

$(document).ready(function() { // anonymous callback function
    init(); // we're calling init inside a function now,
            // so "()" are needed in order to execute it
    ... other stuff ...
});

对于好奇的人：如果代码如下，$(document).ready(init()); 将实际工作：

function init2()
{
     ... real init function;
}

function init()
{
     return init2; // function "returns" a function object...
}

$(document).ready(init()); // init() is "substituted" by a function object
                           // reference to init2(), so it works

（这样做没有多大意义，但它可以更好地解释回调背后的理论）。

Answer 4

在body标签

的onload事件中调用init（）方法

<body onload="init()">

或

$(document).ready(function() {
  // Handler for .ready() called.
  document.addEventListener("deviceready", onDeviceReady, true);
init();
});

了解更多活动详情：http://jquerymobile.com/test/docs/api/events.html

Answer 5

将此行$(document).ready(init());更改为$(document).ready(init);

链接 http://jsfiddle.net/rcDue/2/

当文档使用jQuery加载时，为什么我不能直接调用函数？

5 个答案: