nicht in der Lage, die Logik der SetTimeout in diesem peice von Code zu verstehen

Question

Ich habe einige Teilabschnitte auf Klick auf den Button zu verstecken, hier ist der Code

$('#myButton').on('click', function (event){ 
    event.preventDefault(); 
    $('#panel').hide(); 
    $('#header').hide(); 
    setTimeout(function(){ $('#sub-section').attr('style','display:none;'); }, 100); 
}); 

auf die letzten Anweisungen aus, wenn i Funktion gesetzt Timeout entfernen dann Anzeige Attribut zu keiner ist nicht auf #sub-section festgelegt. Ich habe gerade erfahren, was hier eigentlich benötigt wird. Es sollte auch ohne settimeout funktionieren.

Wenn Funktion hide ist zu viel Zeit auszuführen, ich habe versucht,

$('#panel').attr('style','display:none;'); 
$('#header').attr('style','display:none;'); 
$('#sub-section').attr('style','display:none;'); 

auch, aber es funktioniert nicht. nur bei 3. Aussage.

Answer 1

In diesem Fall wird display: none auf Ihr Element nach 100 Millisekunden angewendet werden. Ich denke, Dies ist getan, weil oben hide Funktion 2 mal aufgerufen haben, und diese Funktion wird mit Animation arbeiten, die einige Zeit dauern wird. So wird Ihre hide Funktion beenden seine in etwa less or equal to 100 milliseconds als display: none wird

Answer 2

ich hoffe, angewendet werden Sie Ihre Antwort hier finden. und ändern Sie auch den Timing-Wert und beobachten Sie die Ausgabe, dann werden Sie verstehen.

[http://jsfiddle.net/mxgtaLzw/2/] 

Ohne Funktion:

[http://jsfiddle.net/mxgtaLzw/3/]