setTimeout/clearTimeout Probleme

Question

Ich versuche, eine Seite zu machen, um nach z. B. auf die Startseite zu gelangen. 10 Sekunden Inaktivität (Benutzer klickt nicht an). Ich benutze jQuery für den Rest, aber das Set/Clear in meiner Testfunktion sind reines Javascript.

In meiner Frustration endete ich mit etwas wie dieser Funktion, von der ich hoffte, dass ich jeden Klick auf die Seite aufrufen konnte. Der Timer startet gut, wird aber nicht mit einem Klick zurückgesetzt. Wenn die Funktion 5-mal innerhalb der ersten 10 Sekunden aufgerufen wird, dann 5 Warnungen werden apear ... keine ... clear

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

Jeder bekam einige Codezeilen, die den Trick tun werden? - Bei jedem Klickstopp den Timer zurücksetzen und starten. - Wenn der Timer z. 10sec etwas tun.

Answer 1

Sie müssen die Funktion "timer" außerhalb deklarieren. Andernfalls erhalten Sie eine neue Variable für jeden Funktionsaufruf.

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

Answer 2

Das ist, weil Timer eine lokale Variable für Ihre Funktion ist.

Versuchen Sie, es außerhalb der Funktion zu erstellen.

Answer 3

Das Problem ist, dass die timer Variable lokal ist, und ihr Wert ist nach jedem Funktionsaufruf verloren.

Sie müssen es bestehen bleiben, können Sie es außerhalb der Funktion setzen können, oder wenn Sie nicht die Variable als global aussetzen wollen, können Sie es speichern, in einer closure, zB:

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

Answer 4

Nicht sicher, ob dies eine gute Praxis Codierung Regel verletzt, aber ich mit diesem in der Regel kommen:

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

die Notwendigkeit, dies verhindern den Timer aus der Funktion zu erklären.

EDIT: dies auch nicht eine neue Variable bei jedem Aufruf erklären, aber immer die gleiche recyceln.

Hoffe, das hilft.

Answer 5

Ein Weg, um diese in zu verwenden, reagieren:

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

    } 
} 

hilfreich, wenn Sie nur möchten eine API aufrufen, nachdem der Benutzer zum Beispiel gestoppt hat eingeben. Die Funktion userTimeout kann über onKeyUp an eine Eingabe gebunden werden.