javascript - stop - Problemas de setTimeout/clearTimeout

exit settimeout javascript

Question

Intento hacer una página para ir a la página de inicio después de, por ejemplo. 10 segundos de inactividad (el usuario no hace clic en ningún lugar). Yo uso jQuery para el resto, pero el set / clear en mi función de prueba es javascript puro.

En mi frustración, terminé con algo así como esta función que esperaba llamar en cualquier clic en la página. El temporizador comienza bien, pero no se restablece con un clic. Si la función se llama 5 veces en los primeros 10 segundos, aparecerán 5 alertas ... no clearTimeout ...

function endAndStartTimer() {
window.clearTimeout(timer);
var timer;
//var millisecBeforeRedirect = 10000;
timer = window.setTimeout(function(){alert(''Hello!'');},10000);
}

¿Alguien tiene algunas líneas de código que harán el truco? - en cualquier clic, detente y reinicia el temporizador. - Cuando el temporizador golpea, por ej. 10sec hacer algo.

Answer 1

Debe declarar el timer fuera de la función. De lo contrario, obtienes una nueva variable en cada invocación de función.

var timer;
function endAndStartTimer() {
window.clearTimeout(timer);
//var millisecBeforeRedirect = 10000;
timer = window.setTimeout(function(){alert(''Hello!'');},10000);
}

Answer 2

El problema es que la variable de timer es local y su valor se pierde después de cada llamada de función.

Necesita persistir, puede colocarlo fuera de la función, o si no desea exponer la variable como global, puede almacenarla en un closure , por ejemplo:

var endAndStartTimer = (function () {
var timer; // variable persisted here
return function () {
window.clearTimeout(timer);
//var millisecBeforeRedirect = 10000;
timer = window.setTimeout(function(){alert(''Hello!'');},10000);
};
})();

Answer 3

Eso es porque el temporizador es una variable local para su función.

Intenta crearlo fuera de la función.

Answer 4

No estoy seguro de si esto infringe alguna regla de codificación de buenas prácticas, pero generalmente salgo con esta:

if(typeof __t == ''undefined'')
__t = 0;
clearTimeout(__t);
__t = setTimeout(callback, 1000);

Esto evita la necesidad de declarar el temporizador fuera de la función.

EDITAR: esto tampoco declara una nueva variable en cada invocación, pero siempre recicla la misma.

Espero que esto ayude.

Answer 5

Una forma de usar esto en reaccionar:

class Timeout extends Component {
constructor(props){
super(props)
this.state = {
timeout: null
}
}
userTimeout(){
const { timeout } = this.state;
clearTimeout(timeout);
this.setState({
timeout: setTimeout(() => {this.callAPI()}, 250)
})
}
}

Útil si solo desea llamar a una API después de que el usuario haya dejado de escribir, por ejemplo. La función userTimeout podría vincularse mediante onKeyUp a una entrada.