Para ejecutar una función varias veces después de una cantidad de tiempo fija, estamos usando pocas funciones.
Método setInterval(): este método llama a una función a intervalos específicos (en ms). Este método llamará continuamente a la función hasta que se ejecute clearInterval() o se cierre la ventana.
Sintaxis:
setInterval(fun, msec, p1, p2, ...)
Parámetros:
- diversión: Es un parámetro obligatorio. Contiene la función a ejecutar.
- mseg: Es un parámetro requerido. Los intervalos de tiempo (en milisegundos) después de cuánto tiempo ejecutar el código. Si el valor es inferior a 10, se utiliza 10.
- p1, p1, …: Es un parámetro opcional. Los parámetros pasan a la función como argumentos. (No compatible con IE9 y versiones anteriores).
Método clearInterval(): este método borra el temporizador establecido por el método setInterval(). El valor de ID devuelto por el método setInterval() se usa como parámetro para este método.
Sintaxis:
clearInterval(varSetInt)
Parámetros:
- varSetInt: Es un parámetro obligatorio. Este es el nombre del temporizador devuelto por el método setInterval().
Ejemplo 1: este ejemplo establece una función que agrega un elemento <div> al <body> continuamente después de 2 segundos.
html
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Call a function
after a fixed time.
</title>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "color:green;"></p>
<button onclick = "gfg_Run()">
Run
</button>
<p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var el_body = document.getElementById("body");
el_up.innerHTML = JSON.stringify(GFG_object);
function gfg_Run() {
setInterval(function() {
var node = document.createElement("DIV");
var textnode = document.createTextNode("this is GFG!");
node.appendChild(textnode);
el_body.appendChild(node);
}, 2000);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Ejecutar :
Ejemplo 2: este ejemplo establece una función que agrega un elemento <div> al <body> continuamente después de 2 segundos y deja de agregar cuando se hace clic en el botón Detener .
html
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Call a function after a fixed time.
</title>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "color:green;"></p>
<button onclick = "gfg_Run()">
Run
</button>
<button onclick = "gfg_Stop()">
Stop
</button>
<p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var el_body = document.getElementById("body");
el_up.innerHTML = JSON.stringify(GFG_object);
var timer;
function gfg_Run() {
timer = setInterval(function() {
var node = document.createElement("DIV");
var textnode = document.createTextNode("this is GFG!");
node.appendChild(textnode);
el_body.appendChild(node);
}, 2000);
}
function gfg_Stop() {
clearInterval(timer);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Ejecutar :
Ejemplo 3: este ejemplo establece una función que agrega un elemento <div> al <body> continuamente después de 1 segundo con un enfoque diferente al anterior y deja de agregar cuando se hace clic en el botón Detener .
html
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Call a function after a fixed time.
</title>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "color:green;"></p>
<button onclick = "gfg_Run()">
Run
</button>
<button onclick = "gfg_Stop()">
Stop
</button>
<p id="GFG_DOWN" style="color:green;font-size:20px;"></p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var el_body = document.getElementById("body");
el_up.innerHTML = JSON.stringify(GFG_object);
var timer;
function gfg_Run() {
function gfg_function() {
var node = document.createElement("DIV");
var textnode = document.createTextNode("this is GFG!");
node.appendChild(textnode);
el_body.appendChild(node);
}
timer = setInterval(gfg_function, 1000);
}
function gfg_Stop() {
clearInterval(timer);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón Ejecutar :
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA