asincronia.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Asincronía en JS</title>
    <style>
      * {
        background-color: rgb(38, 38, 38);
      }
    </style>
  </head>
  <body>
    <script>
      //console.log("inicio");
      //////////////////////////////////////SETTIMEOUT//////////////////////////////////////////////
      /*setTimeout(()=>{
          console.log("Ejecutando un setTimeout, esto se ejecuta una sola vez");
      },5000);
      //SETINTERVAL
      setInterval(() => {
        console.log("Ejecutando un setInterval, esto se ejecuta indefindamente cada intervalo de tiempo");
      }, 1000);
      let temporizador = setTimeout(() => {
        console.log(new Date().toLocaleTimeString());
      }, 3000);
      clearTimeout(temporizador);
      console.log("despues del cleartimeout");*/

      /*let temporizador = setInterval(() => {
        console.log(new Date().toLocaleTimeString());
      }, 1000);

      //para limpiar el timeout
      clearTimeout(temporizador);
      console.log("despues del cleartimeout");*/

      /////////////////////ASINCRONIA Y EVENTO LOOP////////////////////

      /*Codigo sincrono Bloqueante*/
      //funcion anonima autoejecutable
      /*(() => {
        console.log("codigo sincrono");
        console.log("inicio");
        function dos() {
          console.log("Dos");
        }
        function uno() {
          console.log("Uno");
          dos();
          console.log("Tres");
        }
        uno();
        console.log("Fin");
      })();
      console.log("**************************************");
      /*Codigo asincrono NO Bloqueante*/
      //Funcion anonima autoejecutable
      // (() => {
      //   console.log("codigo asincrono");
      //   console.log("inicio");
      //   function dos() {
      //     setTimeout(function () {
      //       console.log("Dos");
      //     }, 1000);
      //   }
      //   function uno() {
      //     setTimeout(function () {
      //       console.log("Uno");
      //     }, 3000);
      //     dos();
      //     console.log("Tres");
      //   }
      //   uno();
      //   console.log("Fin");
      // })();

      //console.clear();
      //////////////////////////////////////////////CALLBACKS///////////////////////////////////////////////////////
      /*
      java scrip usa un modelo asincrono y no bloqueante; con un loop de enventos independientes
      en un solo hilo, (single thread ) para operaciones de entradas y salidas (i/o).
      */
      // function cuadradoCallback(value, callback) {
      //   setTimeout(() => {
      //     callback(value, value * value);
      //   }, 0 | (Math.random() * 1000));
      // }
      // cuadradoCallback(0, (value, result) => {
      //   console.log("inicia Callback");
      //   console.log(`Callback: ${value}, ${result}`);
      //   cuadradoCallback(1, (value, result) => {
      //     console.log(`Callback: ${value}, ${result}`);
      //     cuadradoCallback(2, (value, result) => {
      //       console.log(`Callback: ${value}, ${result}`);
      //       cuadradoCallback(3, (value, result) => {
      //         console.log(`Callback: ${value}, ${result}`);
      //         cuadradoCallback(4, (value, result) => {
      //           console.log(`Callback: ${value}, ${result}`);
      //           cuadradoCallback(5, (value, result) => {
      //             console.log(`Callback: ${value}, ${result}`);
      //             console.log("Fin callback");
      //           });
      //         });
      //       });
      //     });
      //   });
      // });

      // function saludar(nombre) {
      //   alert("Hola " + nombre);
      //   console.log(`hola ${nombre}`)
      // }

      // function procesarEntradaUsuario(callback) {
      //   var nombre = prompt("Por favor ingresa tu nombre.");
      //   callback(nombre);
      // }

      // procesarEntradaUsuario(saludar);

      ///////////////////////////////////////PROMESAS///////////////////////////////////
      // function factorial(numero) {
      //   if (numero < 2) {
      //     return 1;
      //   } else {
      //     return  numero * factorial(numero - 1);
      //   }
      // }
      // console.log(factorial(4));

      /********************************************************/

      // function cuadradoPromise(value) {
      //   if (typeof value !== "number"){
      //     return Promise.reject(
      //       `Error el valor "${value}" ingresado no es un numero`
      //     );}
      //   return new Promise((resolve, reject) => {
      //     setTimeout(() => {
      //       //el resolve es el return positivo de la promise en caso de que se cumpla
      //       resolve({
      //         value,
      //         result: value * value,
      //       });
      //     }, 0 | (Math.random() * 1000));
      //   });
      // }
      // cuadradoPromise(0)
      //   .then((obj) => {
      //     //console.log(obj);
      //     console.log("inicia Promise");
      //     console.log(`Promise: ${obj.value}, ${obj.result}`);
      //     return cuadradoPromise(1);
      //   })
      //   .then((obj) => {
      //     console.log(`Promise: ${obj.value}, ${obj.result}`);
      //     return cuadradoPromise(2);
      //   })
      //   .then((obj) => {
      //     console.log(`Promise: ${obj.value}, ${obj.result}`);
      //     return cuadradoPromise("3");
      //   })
      //   .then((obj) => {
      //     console.log(`Promise: ${obj.value}, ${obj.result}`);
      //     return cuadradoPromise(4);
      //   })
      //   .then((obj) => {
      //     console.log(`Promise: ${obj.value}, ${obj.result}`);
      //     return cuadradoPromise(5);
      //   })
      //   .then((obj) => {
      //     console.log(`Promise: ${obj.value}, ${obj.result}`);
      //     console.log("Fin Promise");
      //   })
      //   .catch(err=>console.error(err));
      //////////////////////////////ASYNC, AWAIT///////////////////////////////////////
      /*
      function cuadradoPromise(value) {
        //valido la o condicion
        if (typeof value !== "number") {
          //manejo el error
          return Promise.reject(
            `Error el valor "${value}" ingresado no es un numero`
          );
        }
        //manejo la promesa
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            //el resolve es el return positivo de la promise en caso de que se cumpla
            resolve({
              value,
              result: value * value,
            });
          }, 0 | (Math.random() * 1000));
        });
      }

      async function funsionAsincronaDeclarada() {
        try {
          console.log("Start Async Function");
          let obj = await cuadradoPromise(0);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(1);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(2);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise("3");
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(4);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(5);
          console.log(`Async function: ${obj.value}, ${obj.result}`);
          console.log("Fin de Async Function");
        } catch (err) {
          console.error(err);
        }
      }

      funsionAsincronaDeclarada();

      const funsionAsincronaExpresada = async () => {
        try {
          console.log("Start Async Function");

          let obj = await cuadradoPromise(6);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(7);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(8);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise("9");
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          obj = await cuadradoPromise(10);
          console.log(`Async function: ${obj.value}, ${obj.result}`);

          console.log("Fin de Async Function");
        } catch (err) {
          console.error(err);
        }
      };

      funsionAsincronaExpresada();
      */
    </script>
  </body>
</html>