-
onerbs
- fa 6 anys
onerbs 
What ‘s up!
Des de fa temps havia volgut escriure aquest tutorial però no m’havia estat possible. En fi, a l’punto.En aquesta ocasió compartiré amb vostès uns mètodes simples, però força útils de JavaScript. Es tracta ni més ni menys que de setInterval (), que serveix per executar una funció infinitament cada x mil·lisegons i setTimeout () que executa una funció una sola vegada després de x milisegons.
No va quedar clar? Vegem-ho una mica més a fons.
Sintaxi: setInterval (function, milliseconds, lang) / setTimeout (function, milliseconds, lang)
| La cadena | Descripció |
| function | Requerit. La funció que serà executada. |
| milliseconds | Requerit. En el primer mètode és el temps que hi haurà entre una execució i una altra. En el segon és el temps que trigarà abans d’executar el codi indicat. |
| lang | Opcional. JScript | VBScript | JavaScript |
Exemple: Suposem que tenim 2 botons i un div.
<button onclick="interval()">Interval</button><button onclick="timeout()">Timeout</button><div></div>
Amb les seves respectives funcions.
var t;function interval(){ t=1; setInterval(function(){ document.getElementById("testdiv").innerHTML=t++; },1000,"JavaScript");}function timeout(){ setTimeout(function(){ document.getElementById("testdiv").innerHTML="Pasaron 2 segundos antes de que pudieras ver esto."; },2000,"JavaScript");}
el primer botó escriurà al div el valor de t infinitament cada 1000 ms.El segon mostrarà un missatge en el mateix div que apareixerà després de 2000 ms.
Què passa si pressiono el primer botó i després el segon botó? Alguna cosa estranya, és clar. Fer clic al segon botó no aturarà l’execució de l’setInterval () inicial.
Per aturar l’execució de el codi del primer botó s’usa la funció clearInterval () però per poder fer això cal modificar una mica el codi anterior quedant alguna cosa així:
var inter,t;function interval(){ t=1; inter=setInterval(function(){ document.getElementById("testdiv").innerHTML=t++; },1000,"JavaScript");}function timeout(){ clear(); setTimeout(function(){ document.getElementById("testdiv").innerHTML="Pasaron 2 segundos antes de que vieras esto."; },2000,"JavaScript");}function clear(){ clearInterval(inter);}
Ara, a l’fer clic al segon botó, l’execució de interval () s’aturarà i no passarà res indesitjat.
setTimeout () també té una funció que deté la seva execució; clearTimeout (). Aquesta funció, a l’igual que l’anterior, requereix guardar l’setTimeout () en una variable per poder usar-la com a paràmetre.
Exemple: Suposem que hi ha un botó que després de 10 segons màgicament apagarà l’ordinador, fem clic però després de 5 segons ens penedim. Què fem? Fàcil, fem servir clearTimeout (). Vegem com.
<button onclick="apagar()">Apagar</button><button onclick="cancelar()">Cancelar</button><div></div>
var timout;function apagar(){ document.getElementById("testdiv").innerHTML="En 10 segundos se apagará el computador."; timout=setTimeout(function(){ document.getElementById("testdiv").innerHTML="Computador apagado."; },10000,"JavaScript");}function cancelar(){ clearTimeout(timout); document.getElementById("testdiv").innerHTML="Operación cancelada.";}
Això seria tot, gràcies a tots per llegir. Si volen el codi usat en aquest tutorial està disponible per a tots en Dropbox i Drive. Salutacions.