Tengo un problema con mi script
quiero actualizar la página cada 30 segundos,
Pero SOLO cuando NO está escribiendo en el cuadro de texto
OTRA COSA IMPORTANTE
la página debe actualizarse si estoy escribiendo en el cuadro de texto y me detengo sin hacer clic en el botón Enviar durante 1 minuto (inactivo)
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> var isTyping = false; $("#inputbox").focus(function() { isTyping = true; }); $("#inputbox").blur(function() { isTyping = false; }); // Refresh page, but ONLY when you are NOT typing var refreshId = setInterval(function() { if (!isTyping) { window.setTimeout( function() { window.location.reload(); )}, 30000); } )} $.ajaxSetup({ cache: false }); </script> </head> <body> <input type="text" id="inputbox"> <button type="button">Click Me!</button> </body> </html>En lugar de buscar "está escribiendo", puede cancelar setTimeout y crear uno nuevo cada vez que el usuario haga algo.
Aquí está la implementación (el tiempo de espera cambió a x100 ms en lugar de x1000 solo para probar y algunos resultados para ver qué sucede)
var timerId; function restartTimer(s) { clearInterval(timerId); timerId = setTimeout(() => { //window.location.reload() $("#out").text("times up"); }, s * 100 /* * 1000, 100 for testing */); $("#out").text("timer restarted: " + s + "s " + timerId); } $("input").on("focus input", () => restartTimer(60)); $("input").on("blur", () => restartTimer(30)); // "technically" startTimer, but it's the same restartTimer(30); // optionally only if "idle" //$("document").on("mousemove click", () => restartTimer(30)); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <input type="text" id="inputbox"> <button type="button">Click Me!</button> <div id="out"></div>