Segur que alguna vegada has necessitat que la teva pàgina web faci alguna cosa, però no immediatament, sinó després que passin uns segons. Per aconseguir aquest efecte, JavaScript ens ofereix una eina fonamental anomenada setTimeout , que bàsicament actua com un cronòmetre que, en arribar a zero, dispara una acció específica. És una d'aquestes funcions que semblen senzilles a simple vista, però que tenen les seves traces i detalls tècnics que convé conèixer per no ficar la pota en programar.
Tot i que ho veiem constantment al navegador, és important aclarir que aquest mètode no forma part del nucli estricte del llenguatge JavaScript, sinó que és proporcionat per l' entorn d'execució . Això significa que, si bé el fem servir a Chrome o Firefox, també el trobem a Node.js, encara que amb algunes diferències en el que ens torna el sistema. Desgranarem a fons com funciona, des del més bàsic fins a trucs avançats perquè les teves aplicacions flueixin com la seda.
Què és exactament setTimeout i com es fa servir?
En termes plans, aquest mètode global permet planificar l'execució d'una peça de codi o funció després que hagi transcorregut un temps determinat . Quan el temporitzador expira i la funció s'executa, el procés acaba; és a dir, no es repeteix automàticament. La sintaxi bàsica requereix que us indiquem què volem fer i quant de temps hem d'esperar, expressat sempre en mil·lisegons (recorda que 1000 ms equivalen a un segon).
Per posar-lo en marxa, podem passar-li una funció com a primer argument. Això no obstant, per raons històriques, també és possible passar una cadena de text amb codi, encara que avui dia es considera una mala pràctica i és molt més recomanable utilitzar funcions de fletxa o referències a funcions nomenades per mantenir el codi net i segur.
Paràmetres i flexibilitat en l'execució
Quan configurem el temporitzador, el segon paràmetre és el delay o retard . Si no hi posem res, el valor per defecte és 0. Però aquí ve allò interessant: què passa si la nostra funció necessita dades externes? Hi ha dues formes principals de manejar això. La primera és mitjançant una funció anònima que emboliqui la trucada original, permetent passar els arguments que vulguem. La segona, i més elegant, és aprofitar que setTimeout permet afegir arguments addicionals a partir del tercer paràmetre, que es mapegen directament a la funció de callback.
Gestió de la cancel·lació amb clearTimeout
De vegades, la vida fa voltes i necessitem cancel·lar una tasca que ja hem programat però que encara no s'ha executat. Per això, hem de saber que setTimeout torna un identificador únic (un timerId). Als navegadors, aquest ID sol ser un nombre, mentre que a Node.js és un objecte més complex. Si desem aquest valor en una variable, podem trucar a la funció clearTimeout(timerId) per anul·lar l'operació i evitar que el codi s'executi, estalviant així recursos del sistema.
Comparativa: setTimeout vs setInterval
És molt comú confondre aquests dos mètodes. Mentre que setTimeout llança la funció una sola vegada, setInterval l'executa repetidament cada cop que transcorre l'interval definit. No obstant això, hi ha un truc avançat: els setTimeout imbricats . Això consisteix a trucar a un nou setTimeout just al final de lexecució de la funció actual.
Aquesta tècnica és molt més flexible que setInterval perquè garanteix un retard real i constant entre el final d'una tasca i l'inici de la següent. Amb setInterval, si la funció triga més a executar-se que el temps de l'interval, les trucades es poden amuntegar o executar sense pausa. En canvi, l'anidament permet ajustar el temps dinàmicament, cosa vital si, per exemple, estem fent peticions a un servidor que podria estar saturat i necessitem augmentar l'interval d'espera.
El curiós cas del retard zero i les limitacions
Si utilitzeu setTimeout(func, 0) , podríeu pensar que la funció s'executa a l'instant, però no és així. El que passa és que el planificador col·loca la tasca a la cua perquè s'executi com més aviat millor , però sempre després que l'script actual hagi acabat del tot. És una manera de dir: «acaba el que estàs fent i, quan puguis, fes això».
A més, cal tenir en compte que els navegadors imposen un límit mínim de 4 ms per a temporitzadors niats després que s'hagin executat cinc vegades seguides. Això és una herència de versions antigues per evitar que el navegador es bloquegés. Així mateix, la precisió no és exacta; si la CPU està al màxim o la pestanya està en segon pla , el navegador pot retardar l'execució fins a 300 ms o fins i tot un segon per estalviar bateria.
Implementació en Frameworks moderns
L'ús d'aquest mètode es trasllada perfectament a eines com ara React o Angular. A React , l'ideal és embolicar el setTimeout dins d'un hook useEffect per controlar el cicle de vida del component i assegurar-se de netejar el temporitzador amb la funció de retorn, evitant així fuites de memòria. A Angular , es pot integrar fàcilment al constructor o als hooks de cicle de vida del component per disparar alertes o carregar dades asíncrons.
Per als que busquen nivells de complexitat més grans, es poden combinar els temporitzadors amb Promeses i async/await . Això permet crear seqüències d'esperes molt més llegibles i professionals, evitant el famós callback hell i permetent que múltiples temporitzadors es gestionin de manera asíncrona i ordenada.
La capacitat de gestionar el temps en JavaScript és fonamental per crear interfícies dinàmiques, des de rellotges digitals i animacions fins a sistemes de reintent de connexió. El domini de setTimeout, la seva anul·lació mitjançant clearTimeout i la comprensió de com interactua amb el bucle d'esdeveniments permeten optimitzar el rendiment de l'aplicació i millorar l'experiència de l'usuari final, tenint sempre present que la precisió temporal depèn estrictament de l'entorn i la càrrega del sistema.