Detailed explanation of usage examples of jQuery.holdReady(hold)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of usage examples of jQuery.holdReady(hold)

伊谢尔伦

Jun 16, 2017 pm 03:20 PM

InstructionsExampleDetailed explanation

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(){
    $(&#39;#btn&#39;).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(&#39;这是使用holdReady加载出来的&#39;);
}); 

//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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

php如何使用PHP的Intl扩展？May 31, 2023 pm 08:10 PM

PHP的Intl扩展是一个非常实用的工具，它提供了一系列国际化和本地化的功能。本文将介绍如何使用PHP的Intl扩展。一、安装Intl扩展在开始使用Intl扩展之前，需要安装该扩展。在Windows下，可以在php.ini文件中打开该扩展。在Linux下，可以通过命令行安装：Ubuntu/Debian：sudoapt-getinstallphp7.4-

如何使用CakePHP中的数据库查询构造器？Jun 04, 2023 am 09:02 AM

CakePHP是一个开源的PHPMVC框架，它广泛用于Web应用程序的开发。CakePHP具有许多功能和工具，其中包括一个强大的数据库查询构造器，用于交互性能数据库。该查询构造器允许您使用面向对象的语法执行SQL查询，而不必编写繁琐的SQL语句。本文将介绍如何使用CakePHP中的数据库查询构造器。建立数据库连接在使用数据库查询构造器之前，您首先需要在Ca

php如何使用CI框架？Jun 01, 2023 am 08:48 AM

随着网络技术的发展，PHP已经成为了Web开发的重要工具之一。而其中一款流行的PHP框架——CodeIgniter（以下简称CI）也得到了越来越多的关注和使用。今天，我们就来看看如何使用CI框架。一、安装CI框架首先，我们需要下载CI框架并安装。在CI的官网（https://codeigniter.com/）上下载最新版本的CI框架压缩包。下载完成后，解压缩

php如何使用PHP的Ctype扩展？Jun 03, 2023 pm 10:40 PM

PHP是一种非常受欢迎的编程语言，它允许开发者创建各种各样的应用程序。但是，有时候在编写PHP代码时，我们需要处理和验证字符。这时候PHP的Ctype扩展就可以派上用场了。本文将就如何使用PHP的Ctype扩展展开介绍。什么是Ctype扩展？PHP的Ctype扩展是一个非常有用的工具，它提供了各种函数来验证字符串中的字符类型。这些函数包括isalnum、is

Vue 中的单文件组件是什么，如何使用？Jun 10, 2023 pm 11:10 PM

作为一种流行的前端框架，Vue能够提供开发者一个便捷高效的开发体验。其中，单文件组件是Vue的一个重要概念，使用它能够帮助开发者快速构建整洁、模块化的应用程序。在本文中，我们将介绍单文件组件是什么，以及如何在Vue中使用它们。一、单文件组件是什么？单文件组件（SingleFileComponent，简称SFC）是Vue中的一个重要概念，它

php如何使用PHP的geoip扩展？Jun 01, 2023 am 09:13 AM

PHP是一种流行的服务器端脚本语言，它可以处理网页上的动态内容。PHP的geoip扩展可以让你在PHP中获取有关用户位置的信息。在本文中，我们将介绍如何使用PHP的geoip扩展。什么是PHP的GeoIP扩展？PHP的geoip扩展是一个免费的、开源的扩展，它允许你获取有关IP地址和位置信息的数据。该扩展可以与GeoIP数据库一起使用，这是一个由MaxMin

php如何使用PHP的DOM扩展？May 31, 2023 pm 06:40 PM

PHP的DOM扩展是一种基于文档对象模型（DOM）的PHP库，可以对XML文档进行创建、修改和查询操作。该扩展可以使PHP语言更加方便地处理XML文件，让开发者可以快速地实现对XML文件的数据分析和处理。本文将介绍如何使用PHP的DOM扩展。安装DOM扩展首先需要确保PHP已经安装了DOM扩展，如果没有安装需要先安装。在Linux系统中，可以使用以下命令来安

php如何使用CI4框架？Jun 01, 2023 pm 02:40 PM

PHP是一种广泛使用的服务器端脚本语言，而CodeIgniter4(CI4）是一个流行的PHP框架，它提供了一种快速而优秀的方法来构建Web应用程序。在这篇文章中，我们将通过引导您了解如何使用CI4框架，来使您开始使用此框架来开发出众的Web应用程序。1.下载并安装CI4首先，您需要从官方网站（https://codeigniter.com/downloa

See all articles