Temporizador (Timing) de JavaScript

La función de temporización es la que nos permite ejecutar funciones en un momento específico.

Al usar la función de temporización, puede retrasar la ejecución del código para evitar que se complete en el momento exacto del desencadenamiento del evento.

Hay dos funciones de temporización en JavaScript:

• setTimeout(function, milisegundos) -Ejecutar la función (function) después de esperar el número especificado de milisegundos

• setInterval(function, milisegundos) -Son similares a setTimeout(), pero ejecutan la función (function) repetidamente

estossetTimeout()ysetInterval()es el métodoObjeto ventanapuede escribirse sin prefijo de ventana.

Método setTimeout()

setTimeout()Método utilizado para ejecutar una función o un fragmento de código especificado después de un período de tiempo.

Sintaxis:

window.setTimeout(function, milisegundos)

El primer parámetro es la función que se debe ejecutar.

El segundo parámetro indica el número de milisegundos antes de la ejecución (1segundo = 1000 milisegundos).

El siguiente ejemplo ejecuta un código después de hacer clic en el botón2Después de X segundos se mostrará el mensaje de alerta:

<button onclick="setTimeout(myFunc,　2000)">Hacer clic</button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

Detener la ejecución del código

clearTimeout()Método que detiene la ejecución de la función especificada en setTimeout().

Sintaxis:

window.clearTimeout(var)

clearTimeout()método utilizando la variable devuelta por setTimeout().

　　t = setTimeout();
　　clearTimeout(t);

Si el función aún no se ha ejecutado, se puede llamarclearTimeout()Este método se utiliza para detener la ejecución.

Igual que el ejemplo anterior, pero con un botón "Detener":

<button onclick="myFunc()">Hacer clic</button>
<button onclick="myStopFunc()">Detener la alerta</button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function() { alert("Hello world"); },　2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

Método setInterval()

setInterval()El método llama repetidamente a una función con un retraso fijo entre cada llamada.

Sintaxis:

window.setInterval(function, milisegundos)

El primer parámetro es la función que se debe ejecutar.

El segundo parámetro indica la longitud del intervalo de tiempo entre cada ejecución.

Este ejemplo ejecuta una función llamada “startTimer” una vez por segundo (como un reloj digital):

//Cada1Ejecutar startTimer() una vez por segundo
setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}

Detener la ejecución del código

clearInterval()El método detiene la ejecución de la función especificada en setInterval()

Sintaxis:

window.clearInterval(var)

clearInterval()El método utiliza la variable devuelta por setInterval()

　　t = setInterval();
　　clearInterval(t);

Igual que el ejemplo anterior, pero con un botón "Detener":

//Cada1Ejecutar startTimer() una vez por segundo
var t = setInterval(startTimer,　1000);
function startTimer() {
　　var date = new Date();
　　document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
//Cancelar la acción repetitiva creada con setInterval()
function stopTimer() {
　　　clearInterval(t);
}

Más ejemplos

Haga clic en el botón "Iniciar conteo" inferior para iniciar el temporizador. Haga clic en el botón "Detener conteo" para detener el conteo:

Haga clic en el botón "Iniciar progreso" inferior para iniciar la barra de progreso. Haga clic en el botón "Detener progreso" para detener la barra de progreso: