Tengo dificultades para entender por qué el navegador se congela y no espera las promesas especificadas en el siguiente código HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Promise Test</title> <style> #myBlock{ height: 400px; width: 400px; background-color: black; } #myBlock:hover{ background-color: red; } </style> </head> <body> <div id="myBlock"></div> <br> <button onclick="awaitPromise()">Await a promise</button> <br> <h3 id="status">Promise Status:</h3> <script> async function awaitPromise(){ document.getElementById("status").innerHTML = "Promise Status: Awaiting Promise"; await new Promise(resolve => setTimeout(resolve, 5000)); /* await new Promise(()=>{ }); await new Promise(()=>{ while(true){ } }); */ document.getElementById("status").innerHTML = "Promise Status: Finished"; } </script> </body> </html> Para la 1ra promesa:
Esperaba que el navegador se congelara durante 5 segundos ya que la promesa no se resolvería durante 5 segundos, pero el navegador nunca se congela.
Para la 2da y 3ra Promesa:
Esperaba que el navegador se congelara ya que la función se detendría permanentemente. Sin embargo, solo la tercera promesa congela el navegador.
Me parece que mientras finalice la función otorgada a la promesa, la interfaz gráfica de usuario no se congelará independientemente de si la promesa se resuelve o no.
¿Puede alguien explicarme por qué el navegador no se congela incluso cuando la función awaitPromise no ha terminado de ejecutarse? ¿Y también por qué el navegador se congela solo cuando espera la tercera promesa? Gracias.