El Intervalo de Tiempo
El intervalo de tiempo puede introducir un retardo de tiempo para ejecutar un bloque de códigos o cada cierto tiempo ejecute un bloque de códigos repetidamente.
El método setTimeout() introduce un tiempo de retardo para ejecutar una línea de código o un bloque de código.
En el Código 117, al hacer click en el botón que es la etiqueta <button>, invoca la función mensaje(), dentro de la función cancelar() está el método setTimeout() que muestra el mensaje con un retardo de 3 segundos, muestra el mensaje con la función alert().
Pegar enlace en la url del explorador web y descarga el archivo:
Código 117: El Método setTimeout()
<!-- Archivo: codigo117.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Mensaje -->
<button onclick="mensaje()">Mensaje</button>
<!-- Códigos de JavaScript -->
<script>
// Función mensaje
function mensaje() {
// Mensaje tarda 3 segundos en aparecer
var miTimeout = setTimeout(function() {
// Mensaje por pantalla
alert("Hola Mundo")
}, 3000);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo117.html
En la Figura_128, si se presiona el botón Mensaje, aparece en pantalla el mensaje Hola Mundo con un retardo de 3 segundos, Figura 129.
Código 117: El Método setTimeout()
Código 117: El Método setTimeout()
El Método clearTimeout()
El método clearTimeout() cancela el intervalo de tiempo especificado por el método setTimeout().
En el Código 118, al cargar la página se activa el método setTimeout() a 3 segundos para mostrar el mensaje Hola Mundo, al hacer click en el botón que es la etiqueta <button>, invoca la función cancelar(), dentro de la función cancelar() está el método clearTimeout() que cancela el tiempo especificado de la variable miTimeout para mostrar el mensaje Hola Mundo, se debe presionar el botón Cancelar antes de 3 segundos, muestra el mensaje con la función alert().
Descargar archivo codigo118.html
Código 118: El Método clearTimeout()
<!-- Archivo: codigo118.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Cancelar -->
<button onclick="cancelar()">Cancelar</button>
<!-- Códigos de JavaScript -->
<script>
// Mensaje tarda 3 segundos en aparecer
var miTimeout = setTimeout(function() {
// Mensaje por pantalla
alert("Hola Mundo")
}, 3000);
// Función cancelar
function cancelar() {
// Cancela mensaje
clearTimeout(miTimeout);
// Mensaje por pantalla
alert("Mensaje Cancelado")
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo118.html
En la Figura 130, si se presiona el botón Cancelar antes de 3 segundos de haber cargado la página, aparece en pantalla Mensaje Cancelado, Figura 131.
Código 118: El Método clearTimeout()
Código 118: El Método clearTimeout()
El Método setInterval()
El Método setInterval() llama repetidamente una función.
En el Código 119, al hacer click en el botón que es la etiqueta <button>, invoca la función intervalo(), dentro de la función intervalo() se activa el método setInterval(), cada segundo muestra un número con un incremento de 1 de una manera indefinida, el valor de la variable x que va incrementando se muestra en la etiqueta <p>.
Descargar archivo codigo119.html
Código 119: El Método setInterval()
<!-- Archivo: codigo119.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Iniciar -->
<button onclick="intervalo()">Iniciar</button>
<!-- Muestra el número -->
<p id="demo"></p>
<!-- Códigos de JavaScript -->
<script>
// Función intervalo
function intervalo() {
// variable x
var x = 0;
// Intervalo
var miIntervalo = setInterval(function() {
// Incrementa en 1
x+=1;
document.getElementById("demo").innerHTML = x;
}, 1000)
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo119.html
En la Figura 132, si se presiona el botón Iniciar, se activa un contador que comienza en 1 y va incrementando en 1 de una manera indefinida, en la Figura 133, el incremento va por 2.
Código 119: El Método setInterval()
Código 120: El Método setInterval()
El Método clearInterval()
El método clearInterval() para la función especificada por el método setInterval().
En el Código 120, al cargar la página se activa el setInterval() que es un contador que comienza en 1 y va incrementando en 1 cada segundo de una manera indefinida que lo muestra la variable x en el id=”demo” en la etiqueta <p>, al presionar el botón Parar que es la etiqueta <button>, se activa el método clearInterval() dentro de la función parar_intervalo() y el contador se para que es la variable x..
Descargar archivo codigo120.html
Código 120: El Método clearInterval()
<!-- Archivo: codigo120.html -->
<!-- Documento HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- La etiqueta meta que da el formato en español -->
<meta charset="UTF-8">
<!-- Título en la pestaña del navegador -->
<title> Ejercicio </title>
</head>
<body>
<!-- Botón Parar -->
<button onclick="parar_intervalo()">Parar</button>
<!-- Muestra el número -->
<p id="demo"></p>
<!-- Códigos de JavaScript -->
<script>
// variable x
var x = 0;
// Intervalo
var miIntervalo = setInterval(function() {
// Incrementa en 1
x+=1;
document.getElementById("demo").innerHTML = x; }, 1000)
// Función parar intervalo
function parar_intervalo() {
clearInterval(miIntervalo);
}
</script>
</body>
</html>
Enlace: localhost/js_ajax_jquery/codigo120.html
En la Figura 134, al cargar la página se activa un contador que comienza en 1 y va incrementado en 1, si se presiona el botón Parar, el contador se para en 5, Figura 135.
Código 120: El Método clearInterval()
Código 120: El Método clearInterval()
Comentarios
Publicar un comentario