En este artículo, aprenderemos a retrasar document.ready hasta que se establezca una variable. El método document.ready() se usa para ejecutar algunos scripts jQuery o JavaScript cuando el HTML DOM está completamente cargado.
Hay dos enfoques que se pueden seguir aquí:
Enfoque 1: Usar el método holdReady() en la biblioteca jQuery y el método setTimeout() . Primero establecemos el parámetro en el método holdReady() en verdadero para mantener la ejecución del método document.ready() . Luego, se puede agregar una función de tiempo de espera con un tiempo de retraso apropiado usando el método setTimeout() . Dentro de este método de tiempo de espera, se define una variable y, posteriormente , se vuelve a llamar a holdReady() , pero esta vez el parámetro se establece en falso para liberar la ejecución del método document.ready() . Por último, el documento.ready()Se llama al método y dentro de este método, la variable ahora está configurada y se muestra un elemento de división que indica que la variable se ha configurado. El contenido del elemento de división se establece mediante el método text() en jQuery.
Ejemplo: En este ejemplo, hay un retraso de 3 segundos (3000 milisegundos) en el método setTimeout() después del cual se establece la variable y el HTML DOM se carga por completo.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
div {
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1></h1>
<!-- The division element -->
<div></div>
<script type="text/javascript">
$.holdReady(true);
setTimeout(function () {
// Setting a variable until
// document.ready is called
const myVar = "GFG";
$.holdReady(false);
}, 3000);
$(document).ready(function () {
$("h1").text("GeeksForGeeks");
$("div").text("The variable has been set!");
});
</script>
</body>
</html>
Producción:
Enfoque 2: usar el método holdReady() en la biblioteca jQuery y el método setInterval() . Este enfoque es muy idéntico al enfoque anterior, pero las distinciones clave se encuentran en la sintaxis del método document.ready que se representa como $(function(){ .. }) y se usa el método setInterval() en lugar de setTimeout( ) método. Por lo general, usamos el método setInterval() para repetir la función pasada en algún intervalo de tiempo, pero en este caso, tiene el mismo propósito que el método setTimeout() . Toda la lógica subyacente sigue siendo la misma que antes.
Ejemplo: En este ejemplo, hay un retraso de 2 segundos (2000 milisegundos) en el método setInterval() después del cual se establece la variable y el HTML DOM se carga por completo.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p,
div {
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1></h1>
<p></p>
<!-- The division element -->
<div></div>
<script type="text/javascript">
$.holdReady(true);
setInterval(() => {
// Setting a variable until
// document.ready is called
var myBoolean = true;
$.holdReady(false);
}, 2000);
// Same as $(document).ready(function(){..})
$(function () {
$("h1").text("GeeksForGeeks");
$("p").text(
"jQuery - Delay document.ready until a variable has been set"
);
$("div").text(
"The boolean variable has been set!");
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA