Warum muss ich eine 1ms setTimeout() zwischen jQuery-Aufrufe setzen?

Ich mache eine kleine Countdown-Bar mit einem CSS-Übergang:Warum muss ich eine 1ms setTimeout() zwischen jQuery-Aufrufe setzen?

.livebar { 
    background-color: black; 
    transition: width 15s linear; 
    width: 100%; 
    height: 5px; 
}

Dieser Code funktioniert nicht (in Chrom), in dem Sinne, dass es kein Übergang. Die Breite geht sofort auf 0:

$("#barbag").append("<div class='livebar'></div>"); 
$(".livebar").css("width", "0");

... aber dieser Code funktioniert wunderbar:

$("#barbag").append("<div class='livebar'></div>"); 
setTimeout(function(){$(".livebar").css("width", "0")}, 1);

Auch dabei die beiden Aussagen separat in der Konsole funktioniert, aber das Einfügen in beide versagt.

Es scheint, dass Chrome braucht einige Zeit nach Erstellen der .livebar div um den Übergang "aktiv" zu machen. Ist das ein bekannter Fehler, oder mache ich etwas falsch oder geht etwas ganz anderes vor?

Quelle

2017-07-29 Lars P

Ich denke, es hat etwas mit event loop

Ereignisschleife Prozessfunktionen von Stack und SetTimeout verwendet eine Callback-Funktion in Gang bringen Warteschlange in einem Stapel während („.livebar‚). Css (‘Breite“ zu tun "0"); läuft nur, sobald der Prozessor es sieht.

Nullverzögerung bedeutet nicht, dass der Rückruf nach null Millisekunden ausgelöst wird. Der Aufruf von setTimeout mit einer Verzögerung von 0 (Null) Millisekunden führt die Callback-Funktion nach dem angegebenen Intervall nicht aus. Die Ausführung hängt von der Anzahl der wartenden Aufgaben in der Warteschlange ab.

Also in Ihrem Fall muss die Animation auf $ warten ("# barbag"). Append (""); um zuerst fertig zu werden, wenden Sie dann css an. Dazu muss es im Stack eingereiht werden, oder es wird zu früh ausgelöst.

Quelle

2017-07-29 19:18:45

können Sie diesen Code für fix Problem verwenden:

Demo: https://output.jsbin.com/basusos

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#barbag").append("<div class='livebar'></div>"); 
    $(".livebar").stop(true, true).animate({width: 0}, 100); 
}); 
</script> 
</head> 
<body> 
    <div id="barbag">Animate Width Zero</div> 
</body> 
</html>

Quelle

2017-07-29 19:26:37

Dies ist allerdings für die Animation JS verwenden, was nicht ideal ist, wenn CSS viel besser geeignet ist. –

Das würde mit ziemlicher Sicherheit funktionieren, ebenso wie meine 'setTimeout()' Lösung, aber ich möchte verstehen, was hier vor sich geht! –

Warum muss ich eine 1ms setTimeout() zwischen jQuery-Aufrufe setzen?

Antwort

Verwandte Themen