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());

実際には、init-function をすぐに呼び出して、その結果を引数として ready-function に渡しています。DOM の準備が整う前にこの行が実行されるため、init-function は失敗します。

代わりにこれに変更したい：

$(document).ready(init);

つまり、結果の代わりに実際の init-function を ready-function に渡します。

于 2012-06-26T06:07:57.287 に答える
1

解決策は、関数をどのように使用するかによって異なりますinit()。

の構文$(document).readyは次のとおりです。$(document).ready(callBackFunction);

これは、コールバックを提供する必要があることを意味します。これは次のとおりです。

  1. 関数オブジェクトは、実行するために「呼び出す」わけではないため、オブジェクトとして「（）」括弧なしで記述する必要があります（上記の定義のように）。代わりに、への関数の参照.ready()を提供しているので、JQueryの内部コードは.ready()それ自体で関数を「検索」して呼び出すことができます

  2. または、内の、の形式の無名関数。function() {..somecode..}.ready(...)

代わりに、関数呼び出しを提供します。これが機能しない理由です。関数を提供していませんが、ある意味では、ほとんどの場合、関数オブジェクトではない関数の「結果」です（ただし、変数、またはreturnステートメントが存在しない場合は未定義）。

したがって、ready（）のコールバックの完全な代替init()となることが意図されている場合は、次のようにします。

$(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 に答える
1

()このようなことなく試してみてください$(document).ready(init);

于 2012-06-26T06:08:16.523 に答える
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 に答える