Abbrechen/Stoppen einer Timeout-Funktion

Question

Ich habe einige Javascipt (jQuery) in dem ich verbinde in #myDiv, wenn eine Schaltfläche geklickt wird, und dann wieder ausgeblendet nach 5 Sekunden mit einer Timeout-Funktion. Es funktioniert gut, aber wenn ein Benutzer erneut auf die Schaltfläche klickt, bevor die Funktion fadeOut innerhalb meiner Zeitüberschreitung ausgeführt wird, muss das Zeitlimit anhalten und im Wesentlichen neu beginnen.

Ich denke, die Antwort wird sein, eine Funktion zuerst zu starten, um das Timeout zu löschen, obwohl ich das nicht funktionieren kann.

$('button').on('click', function() { 

    //need function here to stop the timeout if running 

    $("#myDiv").fadeIn(slow); 

    setTimeout(function(){ 
    $("#myDiv").fadeOut(slow); 
    }, 5000); 

}); 

Answer 1

Sie müssen das Timeout deaktivieren, wenn bereits festgelegt ist:

var to = null; 
$('button').on('click', function() { 

    if(to){ 
    clearTimeout(to); 
    } 
    //need function here to stop the timeout if running 

    $("#myDiv").fadeIn(slow); 

    to = setTimeout(function(){ 
    $("#myDiv").fadeOut(slow); 
    }, 5000); 

}); 

Die clearTimeout() Funktion den Timeout löschen, damit, wenn der Benutzer klicken Sie zweimal auf die Schaltfläche das erste Timeout gelöscht und nur die zweite Instanz ausgeführt werden.

Answer 2

Sie können dies allein in jQuery API-Methoden gebaut haben werden:

$('button').on('click', function() { 
    $("#myDiv") 
     .stop(true,true) // resets current animation queue 
     .fadeIn('slow') 
     .delay(5000)// delays anything in queue 
     .fadeOut('slow'); 
}); 

Dinge macht ein bisschen leichter

Referenzen zu lesen:

• stop()

• delay()

DEMO