jQuery.holdReady(hold)の使用例を詳しく解説-jsチュートリアル-php.cn

jQuery.holdReady(hold)の使用例を詳しく解説

伊谢尔伦

リリース： 2017-06-16 15:20:07

オリジナル

2145 人が閲覧しました

.ready() イベントの実行を一時停止または再開します。

$.holdReady() メソッドを使用すると、呼び出し元は jQuery の Ready イベントを遅らせることができます。この高度な機能は通常、動的スクリプトローダーを使用して実行されます。動的スクリプトローダーは、jQuery プラグインなどの JavaScript をロードし、DOM の準備ができている場合でも追加の準備完了イベントを発生させることができます。このメソッドは、ファイルの早い段階で、次のように

jQuery スクリプトの直後に呼び出す必要があります。 Ready イベントの後にこのメソッドを呼び出しても、このメソッドが発行されていても効果はありません。

ready イベントを遅らせるには、初めて $.holdReady(true) を呼び出します。 Ready イベントを実行する必要がある場合、$.holdReady(false) が呼び出されます。 Ready イベントには複数の保留を設定でき、それぞれが $.holdReady(true) を 1 つずつ呼び出すことができることに注意してください。対応するすべての $.holdReady(false) がポストされ、通常のファイル準備完了条件が満たされるまで、ready イベントは実行されません。

jQuery.holdReady(hold) 戻り値の型 boolean

jquery.holdReady()メソッドにより、この関数でjQueryの完了イベントをロックすることができます。
この高度な機能の一般的なアプリケーションシナリオは、jQuery プラグインなどのスクリプトの動的読み込みです。
添付されたスクリプトが読み込まれるまでは、ページの準備ができていても jQuery 完了イベントはトリガーされません。
この関数はタグ内などのページの先頭部分で呼び出す必要があり、jQuery は次の行を読み込みます。
完了イベントがトリガーされた後にこの関数を呼び出しても効果はありません。
使用法: 最初に .holdReady(true) を呼び出します [呼び出し後に完了イベントはロックされます]。完了イベントを起動する準備ができたら、.holdReady(false) を呼び出します。
完了イベントには複数のロックを追加でき、各ロックは $.holdReady(false)[unlock] 呼び出しに対応することに注意してください。
jQuery の完了イベントは、すべてのロックが解放され、ページの準備ができたときに発生します。
実際、これは動的スクリプトに依存する必要がある一部のコードに対するセキュリティロックです。
ready イベントは、DOM ツリーが正常に構築された後ではなく、必要な動的スクリプトが読み込まれた後に実行されます。

コード例:

例1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>php.cn</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery.holdReady(true);
$(document).ready(function(){
  alert("我不会被弹出");
})
</script>
</head>
<body>
  
</body>
</html>

ログイン後にコピー

上記コードでは、jQuery.holdReady(true)を追加しているため、ドキュメントが読み込まれてもready()内の関数は実行されません。

例 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="" />
<title>php.cn</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
</head>
<body>
<button id="first">点击测试弹出</button>
<button id="second">解除延迟</button>
<script type="text/javascript">
jQuery.holdReady(true) 
$(document).ready(function(){
  $("#first").click(function(){
    alert("我不会被弹出");
  })
})
$("#second").click(function(){
  jQuery.holdReady(false);
})
</script>
</body>
</html>

ログイン後にコピー

クリックして遅延を解除すると、ポップアップが表示されます。

もう一度小さな例を見てみましょう

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<title>Insert title here</title></head>
<body>
<input type="button" id="btn" value="呵呵">
</body>
</html>

ログイン後にコピー

次に、2つのjsファイルがあります

最初にロードするのはindex.jsです

$.holdReady(true);//将holdReady改为ture,点击按钮就没有任何效果,改为false就可以是用来里面的js事件$(function(){
    $(&#39;#btn&#39;).click(function(){
        alert(123);
    });

});

ログイン後にコピー

次の2つのjsファイルにはindex.jsとhold.jsが書かれています

indexのみ

//hold.js$(function(){
    alert(&#39;这是使用holdReady加载出来的&#39;);
}); 

//index.jsjQuery.holdReady(true)
$.getScript("hold.js", function() {
    jQuery.holdReady(false);
});

ログイン後にコピー

hold.jsをロードするときに、コールバック関数を呼び出してtrueをfalseに変更します。ファイルをロードできます

以上がjQuery.holdReady(hold)の使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。