problemi setTimeout / clearTimeout

Provo a fare una pagina per andare alla pagina iniziale dopo es. 10 secondi di inattività (utente che non fa clic ovunque). Io uso jQuery per il resto, ma il set / clear nella mia funzione di test è puro javascript.

Nella mia frangeria ho finito con qualcosa come questa funzione che speravo di poter chiamare su qualsiasi clic sulla pagina. Il timer si avvia correttamente, ma non viene ripristinato con un clic. Se la funzione viene chiamata 5 volte entro i primi 10 secondi, appariranno 5 avvisi … no clearTimeout …

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

Qualcuno ha qualche riga di codice che farà il trucco? – su qualsiasi clic, ripristina e avvia il timer. – Quando il timer colpisce ad es. 10 secondi fanno qualcosa.

È necessario dichiarare il timer al di fuori della funzione. Altrimenti, ottieni una nuova variabile per ogni invocazione di funzione.

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

Il problema è che la variabile del timer è locale e il suo valore viene perso dopo ogni chiamata di funzione.

Devi mantenerlo, puoi metterlo fuori dalla funzione, o se non vuoi esporre la variabile come globale, puoi salvarla in una chiusura , ad esempio:

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

Questo perché il timer è una variabile locale per la tua funzione.

Prova a crearlo al di fuori della funzione.

Un modo per usare questo in risposta:

 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) }) } } 

Utile se desideri chiamare solo un’API dopo che l’utente ha smesso di digitare per esempio. La funzione userTimeout potrebbe essere associata tramite onKeyUp a un input.

Non sono sicuro se questo violi qualche regola di codifica di buona pratica, ma di solito ne esco con questa:

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

Ciò impedisce la necessità di dichiarare il timer fuori dalla funzione.

EDIT: anche questo non dichiara una nuova variabile ad ogni invocazione, ma ricicla sempre lo stesso.

Spero che questo ti aiuti.

Funziona bene È un manager che ho creato per gestire gli eventi di attesa. Ha eventi da tenere, e per quando lasci andare.

 function onUserHold(element, func, hold, clearfunc) { //var holdTime = 0; var holdTimeout; element.addEventListener('mousedown', function(e) { holdTimeout = setTimeout(function() { func(); clearTimeout(holdTimeout); holdTime = 0; }, hold); //alert('UU'); }); element.addEventListener('mouseup', clearTime); element.addEventListener('mouseout', clearTime); function clearTime() { clearTimeout(holdTimeout); holdTime = 0; if(clearfunc) { clearfunc(); } } } 

Il parametro elemento è quello che si tiene. Il parametro func si triggers quando viene mantenuto per un numero di millisecondi specificato dal parametro hold. Il parametro clearfunc è facoltativo e se viene fornito, verrà generato se l’utente lascia andare o lascia l’elemento. Puoi anche fare qualche soluzione per ottenere le funzionalità che desideri. Godere! 🙂