{"id":749,"date":"2024-07-30T20:42:59","date_gmt":"2024-07-30T18:42:59","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=749"},"modified":"2024-07-30T20:42:59","modified_gmt":"2024-07-30T18:42:59","slug":"001-temporizadores-settimeout-setinterval","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/08-programacion-asincrona\/001-temporizadores-settimeout-setinterval\/","title":{"rendered":"001. Temporizadores (setTimeout &amp; setInterval)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En estos cap\u00edtulos vamos a trabajar con la <strong>programaci\u00f3n as\u00edncrona<\/strong>, o entender como funciona la <strong>asincron\u00eda<\/strong> en <strong>Javascript<\/strong>. Es muy importante entender lo que son los <strong>temporizadores<\/strong>. <strong>Javascript<\/strong> tiene funciones que nos van a permitir lanzar otras acciones despu\u00e9s de haber pasado cierto tiempo o en una n cantidad de veces.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Hay una manera de poder ejecutar a posteriori funciones y ciertas acciones en <strong>Javascript<\/strong>, y es mediante los <strong>temporizadores<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Existen dos temporizadores que son los que vamos a utilizar a lo largo de los siguientes cap\u00edtulos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>setTimeout()<\/em><\/strong>: recibe una <strong>callback<\/strong> (funci\u00f3n que va a ejecutar) y recibe un tiempo expresado en milisegundos. Y se ejecuta \u00fanicamente una vez.<\/li>\n\n\n\n<li><strong><em>setInterval()<\/em><\/strong>: recibe un <strong>callback<\/strong> al igual que <strong><em>setTimeout()<\/em><\/strong>, pero se ejecuta indefinidas veces.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">setTimeout()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos un ejm de sintaxis del m\u00e9todo <strong><em>setTimeout()<\/em><\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  &nbsp; &nbsp; console.log(\"Inicio setTimeout()\");\n      setTimeout(() =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; console.log(\"Ejecutando un setTimeout(), esto se ejecuta\n        una sola vez\");\n&nbsp; &nbsp; &nbsp; }, 1000);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">setInterval()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Veamos un ejm de la funci\u00f3n <strong><em>setInterval()<\/em><\/strong> para ver su sintaxis.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; &nbsp; &nbsp; console.log(\"Inicio setInterval()\");\n&nbsp; &nbsp; &nbsp; setInterval(() =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; console.log(\"Ejemplo de setInterval(), se ejecuta infinitas veces\");\n&nbsp; &nbsp; &nbsp; }, 1000);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">De esta manera podr\u00edamos imprimir en la consola un reloj, de la siguiente forma.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; &nbsp; &nbsp; setInterval(() =&gt; {\n  &nbsp; &nbsp; &nbsp; console.log(new Date().toLocaleTimeString());\n&nbsp; &nbsp; &nbsp; }, 1000);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Funciones que cancelan<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Existen dos funciones que cancelan estas dos funciones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">clearTimeout()<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Esta funci\u00f3n cancela a la funci\u00f3n <strong><em>setTimeout()<\/em><\/strong>. Para que esta funci\u00f3n funcione, la funci\u00f3n <strong><em>setTimeout()<\/em><\/strong> hay que guardarla en una variable, de la siguiente forma.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; &nbsp; &nbsp; let temporizador = setTimeout(() =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; console.log(\"Ejm de setTimeout()\");\n&nbsp; &nbsp; &nbsp; }, 1000);\n&nbsp; &nbsp; &nbsp;\n&nbsp; &nbsp; &nbsp; clearTimeout(temporizador);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">clearInterval()<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Esta funci\u00f3n cancela a la funci\u00f3n <strong><em>setInterval()<\/em><\/strong>. Al igual que con clearTimeout(), hay que guardar <strong><em>setInterval()<\/em><\/strong> en una variable, y llamar a la funci\u00f3n <strong><em>clearInterval()<\/em><\/strong> que como par\u00e1metro recibe el nombre de la variable. Veamos su sintaxis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  &nbsp; &nbsp; let temporizador = setInterval(() =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; console.log(\"Ejm de setTimeout()\");\n&nbsp; &nbsp; &nbsp; }, 1000);\n\n&nbsp; &nbsp; &nbsp; clearInterval(temporizador);\n&nbsp; &nbsp; &nbsp; console.log(\"Despu\u00e9s del clearInterval()\");<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>En estos cap\u00edtulos vamos a trabajar con la programaci\u00f3n as\u00edncrona, o entender como funciona la asincron\u00eda en Javascript. Es muy importante entender&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":746,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-749","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En estos cap\u00edtulos vamos a trabajar con la programaci\u00f3n as\u00edncrona, o entender como funciona la asincron\u00eda en Javascript. Es muy importante entender...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=749"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/749\/revisions"}],"predecessor-version":[{"id":751,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/749\/revisions\/751"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/746"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}