Home > Article > Web Front-end > Detailed explanation of usage examples of jQuery.holdReady(hold)
Detailed explanation of usage examples of jQuery.holdReady(hold)
- 伊谢尔伦Original
- 2017-06-16 15:20:072067browse
Pause or resume the execution of the .ready() event.
The $.holdReady() method allows the caller to delay jQuery's ready event. This advanced functionality is typically done using a dynamic script loader, which loads JavaScript such as a jQuery plug-in, and allows additional ready events to occur even when the DOM may be ready. This method must be called early in the file, immediately after the
jQuery script like this. Calling this method after the ready event will have no effect even if it has been emitted.To delay the ready event, call $.holdReady(true) for the first time. When the ready event should be executed, $.holdReady(false) is called. Please note that multiple holds can be placed on the ready event, each calling $.holdReady(true) one by one. The ready event will not execute until all corresponding $.holdReady(false) has been posted and the normal file ready conditions are met.
jQuery.holdReady(hold) Return value type boolean
The jquery.holdReady() method allows jQuery's completion event to be locked by this function.
A typical application scenario for this advanced feature is dynamic loading of scripts, such as jQuery plug-ins, etc.
Before the attached script is loaded, the jQuery completion event will not be triggered even if the page is ready.
This function must be called in the front part of the page, such as in the tag, jQuery loads the next line.
Calling this function after the completion event is triggered has no effect.
Usage: First call .holdReady(true) [the completion event will be locked after the call]. When ready to fire the completion event, call .holdReady(false). It should be noted that
You can add multiple locks to the completion event, and each lock corresponds to a $.holdReady(false)[unlock] call.
jQuery's completion event will be triggered when all locks are released and the page is ready.
In fact, it is a security lock for some codes that need to rely on dynamic scripts.
The ready event will be executed after the required dynamic scripts are loaded, rather than after the DOM tree is successfully constructed.
Example code:
Example 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>In the above code, due to the addition of jQuery.holdReady(true), even though the document is loaded, it will not be executed. function in ready().
Example 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>When you click to release the delay, it will pop up.
Let’s look at a small example again
<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>
Then there are two js files
The first thing to load is index.js
$.holdReady(true);//将holdReady改为ture,点击按钮就没有任何效果,改为false就可以是用来里面的js事件$(function(){
$('#btn').click(function(){
alert(123);
});
});Write two js below The files index.js and hold.js
Only load index.js in jsp, decide whether to load hold.js in index.js
The code is as follows:
//hold.js$(function(){
alert('这是使用holdReady加载出来的');
});
//index.jsjQuery.holdReady(true)
$.getScript("hold.js", function() {
jQuery.holdReady(false);
});Load hold.js When calling a callback function, change true to false, so that the hold.js file can be loaded
The above is the detailed content of Detailed explanation of usage examples of jQuery.holdReady(hold). For more information, please follow other related articles on the PHP Chinese website!