0

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

亲切的问候！

4

5 回答 5

3

它在这一行：

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

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

您想改为：

$(document).ready(init);

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

于 2012-06-26T06:07:57.287 回答
1

你应该试试()这样$(document).ready(init);

于 2012-06-26T06:08:16.523 回答
1

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

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

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

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

  2. 或, inside形式的匿名函数。function() {..somecode..}.ready(...)

相反，您要做的是提供函数调用，这就是它不起作用的原因：您没有提供函数，而是在某种意义上说，函数的“结果”在大多数情况下不是函数对象（而是变量，如果return语句不存在，则为 undefined）。

因此，如果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

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

于 2012-06-26T06:15:37.730 回答
0

在 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

于 2012-06-26T06:07:57.250 回答
0

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

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

于 2012-06-26T06:14:18.490 回答