Estoy creando una página web y decidí intentar que vuelvas al inicio automáticamente si lleva cierto tiempo sin hacer clic en la pantalla. Intenté hacerlo pero cuando entro a la página por mucho que toque la pantalla la hora no se pone a cero y de todos modos aparece la alerta. La página web también se está cargando y no carga todo el contenido. Aquí está el código que tengo actualmente:
var startTime = new Date(); document.addEventListener('DOMContentLoaded', function(){ var seconds = 1; while (seconds < 5) { endTime = new Date(); var timeDiff = endTime - startTime; //in ms // strip the ms timeDiff /= 1000; // get seconds var seconds = Math.round(timeDiff); console.log(seconds + " seconds"); setTimeout(() => {}, 1000); // Like time.sleep } alert("Touch the screen!") }) document.addEventListener("click", function() { console.log("Hello") startTime = new Date() });¡Gracias!
La función setTimeout es una función asíncrona, por lo que no bloquea el hilo principal.
Deberías usar
let startTime=new Date(); setInterval(function() { let currentTime=new Date(); let timeDiff=(currentTime-startTime)/1000; if(timeDiff>5) {/*code to scroll up the page*/} },200) //it checks every 200 millisecodns the time document.addEventListener("click", function() { console.log("Hello") startTime = new Date() });El "DOMContentLoaded" se activa una vez que se carga el documento HTML, esto a menudo significa que es antes de que CSS y las imágenes se carguen en la página, lo que podría explicar por qué su página no se carga por completo. No veo ninguna lógica que restablezca el temporizador una vez que se hace clic en la página, debe tener un detector de eventos al hacer clic que restablecerá el temporizador y moverá la variable del temporizador fuera de un nivel de alcance para que ambos detectores de eventos puedan usar eso.
Creo que tienes una idea equivocada sobre cómo funciona setTimeout .
Con setTimeout puede registrar una función que se llamará después de que haya pasado el número indicado de ms.
La función que le das es un noop, así que supongo que imaginas que setTimeout tiene un efecto secundario. En esta situación en particular, supongo que espera que setTimeout detenga la ejecución del bucle, pero ese no es el caso. Si espera que funcione como una función time.sleep , no es así, ya que después de registrar la devolución de llamada, simplemente continúa.
Entonces, la página no se está cargando por completo, porque tiene que ejecutar continuamente este ciclo while y no puede hacer nada más hasta que termine con eso.
Para obtener algo más similar a time.sleep , puede usar async/await.
function sleep(ms){ return new Promise(resolve => setTimeout(resolve, ms)); } document.addEventListener('DOMContentLoaded', async function(){ var seconds = 1; while (seconds < 5) { endTime = new Date(); var timeDiff = endTime - startTime; //in ms // strip the ms timeDiff /= 1000; var seconds = Math.round(timeDiff); console.log(seconds + " seconds"); await sleep(1000) } alert("Touch the screen!") }) En lo anterior, definí una función auxiliar, sleep , que crea una Promesa, que simplemente se resuelve después de que haya pasado la cantidad indicada de ms.
Para usar esto, la función que lo usa debe estar marcada como async . Es por eso que puede ver la palabra clave async justo antes de la palabra clave de function en la llamada addEventListener .
Una vez que se cumple ese requisito, puede usar la función de suspensión agregando la palabra clave await delante de ella.