Lade-Animation mit Verzögerung anzeigen

Question

In meiner Webanwendung verwende ich JSF und Primefaces. Auf einigen Tasten habe ich zeitraubende Funktionen. Während dieser Zeit möchte ich eine Ladeanimation zeigen, bis die komplette Seite fertiggestellt ist. Das ich durch den Aufruf der Funktionen showLoading tun() und hideLoading() wie folgt aus:

<p:commandLink oncomplete="hideLoading();" onstart="showLoading()" process="@form" update="@form" actionListener="#{dummyController.dummyMethod}" 
Content 
</p:commandLink> 

Innerhalb der Funktionen, die ich zeigen, nur bin/hidings div-Objekte mit einer bestimmten ID:

function showLoading() { 
    $("#loader").show(); 
} 

Das alles funktioniert gut. Jetzt möchte ich die Lade-Animation nur anzeigen, wenn die Seiten mehr als eine Sekunde zum Erstellen benötigen. Deshalb ich so meine Funktionen geändert:

function showLoading() { 
    $(#loader").delay(1000).show(0); 
} 

function hideLoading() { 
    $("#loader").clearQueue(); 
    $("#loader").hide(); 
} 

Mein Problem an dieser Stelle: Manchmal ist der Lader funktioniert gut, aber in einigen Fällen ist es nicht angezeigt. Mein Vorschlag: showLoading wird zu verschiedenen Zeiten (verwaltet vom Client) aufgerufen. Manchmal wird es direkt am Anfang aufgerufen, aber manchmal werden die anderen Aktionen vor showLading ausgeführt, so dass es weniger als eine Sekunde dauert, um den Rest der Seite zu erstellen.

Hat jemand irgendwelche Vorschläge, um dieses Problem zu lösen? Vielleicht mit Multithreading in Javascript (Ich las etwas über Web Workers ...)

Vielen Dank für Ihre Hilfe.

Answer 1

Von der jQuery delay Seite:

Die .delay() Methode ist am besten für zwischen der Warteschlange jQuery Effekte zu verzögern. Da delay() nur begrenzt verfügbar ist, bietet es beispielsweise keine Möglichkeit, die Verzögerung abzubrechen. Delay() ist kein Ersatz für die native setTimeout-Funktion von JavaScript, die für bestimmte Anwendungsfälle möglicherweise besser geeignet ist.

Ich glaube, Sie die setTimeout verwenden können Javascript-Funktion, so etwas wie dieses

var timer; 

function showLoading() { 
    timer = setTimeout(function(){ 
          $(#loader").show(0); 
         }, 1000); 
} 

function hideLoading() { 
    if(timer){ 
     clearTimeout(timer); 
    } 
    $("#loader").hide(); 
}