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

Why can't I call a function direct when document loads with jQuery?

本文关键字：不能 调用 函数 文档 加载 jQuery 为什么      更新时间：2023-09-26

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

亲切问候！

它

在这一行中：

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

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

您想改为更改为以下内容：

$(document).ready(init);

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

你应该尝试没有这样的() $(document).ready(init);

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

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

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

  1. 一个函数对象，作为一个对象，它必须在没有"（）"括号的情况下编写（如上面的定义），因为我们不是为了执行它而"调用"它！相反，我们提供了函数对.ready()的引用，因此 JQuery 的.ready()内部代码可以自行"查找"并调用该函数

  2. 或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()（记住调用 ->括号，如前所述）：

$(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

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

在正文标签的加载事件中调用 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

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

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

相关文章：