En este artículo cubriré la funcionalidad básica de cronometrar eventos en JavaScript. Los eventos de tiempo básicamente incluyen dos métodos: setInterval () y setTimeout ()

JavaScript se puede ejecutar en intervalos de tiempo, a esto se le llama eventos cronometrados , permite la ejecución de código en intervalos de tiempo específicos. Este tutorial se ocupará del concepto de evento de tiempo en JavaScript. El artículo cubrirá ciertas funciones de JavaScript para implementar esta funcionalidad relacionada con el tiempo.

JavaScript facilita la ejecución del script dentro de un intervalo de tiempo específico (ejecución periódica). Esto se conoce como evento de sincronización. Estos intervalos de tiempo se denominan eventos de tiempo.

Los métodos clave para usar con JavaScript para manejo de tiempo son:

setTimeout(function, milliseconds) Ejecuta una función, después de esperar un número específico de milisegundos.
setInterval(function, milliseconds) Igual que setTimeout (), pero repite la ejecución de la función continuamente.
clearInterval() El método clearInterval() borra un temporizador configurado con el método setInterval () . El valor de ID devuelto por setInterval () se usa como parámetro para el método clearInterval ().
clearTimeout () El método clearTimeout () borra un temporizador configurado con el método setTimeout () . El valor de ID devuelto por setTimeout () se utiliza como parámetro para el método clearTimeout (). Luego, si la función aún no se ha ejecutado, podrá detener la ejecución llamando al método clearTimeout ().

Método setInterval ():

Se utiliza para ejecutar una función varias veces con un retraso entre cada función, es decir, ejecuta un código específico una y otra vez con el intervalo de un período de tiempo fijo. La función pasada en el primer parámetro se ejecutará nuevamente después de un tiempo especificado en milisegundos, en el segundo parámetro.

En el método setInterval (), no ejecutará un script a menos que haya transcurrido un período de tiempo específico y continuará ejecutando la función, después de cada recaída del tiempo dado. Este método permite especificar un fragmento de código JavaScript (expresión) que se activará una y otra vez después de cada número especificado de milisegundos. El siguiente script aclarará la idea del método setInterval ().

<html>
<head>
<title> Ejemplo de SetInterval </title>
</head>
<body>
<p> Haga clic en el botón para la ejecución periódica del script </p>
<button onclick = "periodic ()"> Haga clic aquí </button>
<script type = "text / javascript"><

función periódica () {
setInterval (function () {alert ("Bienvenido a la página.")}, 3000);
}
</script>
</body>
</html>

Ver ejemplo anterior

Es muy importante saber que el cuadro de alerta del método setInterval () aparece para siempre, por lo tanto, siempre es necesaria la terminación de la ejecución. El método ClearInterval () se utiliza para finalizar la ejecución de SetInterval. El método clearInterval () se utiliza para detener más ejecuciones de la función especificada en el método setInterval (). Se requiere una variable global para el uso del método clearInterval () al crear los intervalos. Script compilará la idea de cómo terminar el programa de ejecución.

<html>
<head>
<title>ClearInterval Method </title>
</head>
<body >
<left>
<div id="time"></div>
<input type="button" value="Comenzar a mostrar el tiempo (ejecución del intervalo)" onclick="startInterval();" /><input type="button" value="Dejar de mostrar el tiempo (Terminación del intervalo)" onclick="stopInterval();" />
</center>
<script language="javascript">

var TimerHandler;  

function startInterval(){
        TimerHandler = setInterval("startTime();", 2000);
    }

function startTime(){var tmpDate = new Date();
document.getElementById('time').innerHTML = tmpDate.toLocaleTimeString();
    }
function stopInterval(){

clearInterval(TimerHandler);
    }
</script>
</body>
</html>

Ver ejemplo anterior

Método setTimeout ()

En el método setTimeout (), la función no se ejecutará a menos que y hasta que haya transcurrido un número especificado de milisegundos. Generalmente hay un nombre de función en el primer parámetro de setTimeout (). En el segundo parámetro, se pasa el nuevo período de tiempo para la ejecución del primer parámetro.

<html>
<head>
<title>SetTimeout Example</title>
</head>
<body>
<p>Haga clic para ver el cuadro de alerta después de 3 segundos</p>
<input type="button" value="Haga clic aquí" onclick="recieveMessage();" />
</p>
<script language="javascript">

function recieveMessage(){
		var screen = setTimeout ( "alert( '¡¡¡Recibes un mensaje después de 3 segundos !!!' )" , 3000);
    }
</script>
</body>
</html>

Ver ejemplo anterior

Similar al método setTimeinterval (), el método setTimeout () también debe terminarse después de la ejecución. El método clearTimeout () se usa para detener la ejecución de la función especificada en el método setTimeout (), que se describe en el siguiente script listado.

<html>
<head>
<title>Javascript clearTimeout</title>
</head>
<body >
<center>
<div id="time"></div>
<input type="button" value="Comienza Timer" onclick="startTimer();" />
<input type="button" value="Termina Timer" onclick="stopTimer();" />
</center>
<script language="javascript">
var timeOut;
var timeFormat = new Date();
document.getElementById('time').innerHTML = timeFormat.toLocaleTimeString(); 

	function startTimer(){
		var timeFormat = new Date();
		document.getElementById('time').innerHTML = timeFormat.toLocaleTimeString(); 	
		timeOut = setTimeout("startTimer();", 2000);
	}
	
	function stopTimer(){
		clearTimeout(timeOut);
	}
</script>
</body>
</html>

Ver ejemplo anterior