ホームページ > 記事 > ウェブフロントエンド > jqueryでreadyイベントを使用するにはどうすればよいですか?
jqueryでreadyイベントを使用するにはどうすればよいですか?
- 伊谢尔伦オリジナル
- 2017-06-16 15:44:561568ブラウズ
jQuery.holdReady()メソッドの使用例
このメソッドを呼び出すと、jQueryのreadyeventが遅れる可能性があります。つまり、ドキュメントはロードされていますが、readyイベント処理メソッドは実行されません。
jQuery.holdReady() メソッドを複数回呼び出して、jQuery の Ready イベントを遅延させることができます。特定の条件が満たされた場合、このメソッドのパラメーターを false に設定することで遅延を 1 つずつ解放できます。このメソッドは通常、動的スクリプトの読み込みに使用されます。スクリプトが読み込まれたら、このメソッドのパラメーターを false に設定して、jQuery.ready() イベントの遅延を解放できます。
通常、jqueryでreadyイベントを使用する場合、ページがロードされていないためにDOM要素が取得されないことを防ぐために、ページがロードされた後にイベントがトリガーされます。次の例のように:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>deom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.2.js"></script>
<script type="text/javascript">
$(function(){ // 页面加载完成后再获取content元素
console.log($('#content').html());
}) // 获取不到元素
console.log($('#main').html());
</script>
</head>
<body>
<div id="content">this is content</div>
<div id="main">this is main</div>
</body>
</html>上記の状況と同様、ページ内の DOM 要素が読み込まれると、ready イベントが自動的にトリガーされます。たとえば、次の例では、ready を最初に出力し、次に timeout を出力する必要があります。ただし、ready イベントをトリガーする前に、他の要素がロードされるまで待機する必要がある場合があります。つまり、最初に出力タイムアウトしてから出力準備完了になります。この場合はどうすればよいでしょうか。
setTimeout(function(){
console.log("timeout");
}, 500)
$(function(){
console.log("ready");
})2. Ready 実行を遅らせる方法
Ready 実行を遅らせる方法はいくつかあります。
2.1 readyメソッドの位置を変更する
jsは通常、上から下の順に実行されますが、この設定に基づいてreadyの実行を遅らせることができます。
$('#submit').click(function(){
// 执行ready
$(function(){
console.log("ready");
})
})submit 要素をクリックするとトリガーの準備が整います。
2.2 $.holdReady()を使う
上記のコードはクリック後にreadyメソッドをトリガーできますが、readyに大量のコンテンツがある場合はこのように書くのは良くありません。ロジックはかなり複雑です。実際、jquery は、ready メソッドの実行を遅らせる方法、$.holdReady() をすでに提供しています。引き続きセクション 1 の例を使用します:
setTimeout(function(){
console.log("timeout");
// 释放ready方法，开始执行
$.holdReady(false);
}, 500)
// 把ready方法hold住，暂时不让ready执行
$.holdReady(true);
$(function(){
console.log("ready");
})$.holdReady() を使用すると、最初に timeout を出力し、次に ready を出力し、setTimeout が実行された後に readready を実行できます。
$.holdReady(true) と $.holdReady(false) は両方ともペアで表示されます。ready を実行する前に複数のリクエストが完了するまで待機する必要がある場合は、次のように記述できます:
setTimeout(function(){
console.log('timeout0');
$.holdReady(false);
}, 500);
setTimeout(function(){
console.log('timeout1');
$.holdReady(false);
}, 500);
setTimeout(function(){
console.log('timeout2');
$.holdReady(false);
}, 500);
$.holdReady(true);
$.holdReady(true);
$.holdReady(true);
$(function(){
console.log('ready');
})上記のコードはすべて3 つの setTimeout が実行されたら、実行準備完了です。
3. ソースコード内での $.holdReady の実装
実際、$.holdReady() は、ソースコード内で $.readyWait の値を操作し、 $.readyWait + の値を作成します。 1, $.holdReady( false) $.readyWait の値を -1 にし、$.readyWait の値が 1 のときに準備完了をトリガーします。 $.readyWait のデフォルト値は 1 であるため、ready はデフォルトで直接トリガーされます。
jQuery.extend({
// 表示ready方法是否正在执行，若正在执行，则将isReady设置为true
isReady: false,
// ready方法执行前需要等待的次数
readyWait: 1,
// hold或者释放ready方法，若参数为true则readyWait++，否则执行ready，传入参数为true
holdReady: function( hold ) {
if ( hold ) {
jQuery.readyWait++;
} else {
jQuery.ready( true );
}
},
// 当DOM加载完毕时开始执行ready
ready: function( wait ) {
// 若传入的参数为true，则--readyWait；否则判断isReady，即ready是否正在执行
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
return;
}
// Remember that the DOM is ready
jQuery.isReady = true;
// 若readyWait-1后还是大于0，则返回，不执行ready。
if ( wait !== true && --jQuery.readyWait > 0 ) {
return;
}
// If there are functions bound, to execute
readyList.resolveWith( document, [ jQuery ] );
// 触发ready方法，然后解除绑定的ready方法。
if ( jQuery.fn.triggerHandler ) {
jQuery( document ).triggerHandler( "ready" );
jQuery( document ).off( "ready" );
}
}
});$.holdReadyの関数本体を見ると、$.holdReady(true)は$.readyWait++をさせるためのものであり、$.holdReady(false)は$.ready(true);
holdReady: function( hold ) {
if ( hold ) {
jQuery.readyWait++;
} else {
jQuery.ready( true );
}
}を実行するためのものであることがわかります。以上がjqueryでreadyイベントを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。