Warum wird das Loader-Image nicht angezeigt?

Question

Ich habe eine Funktion, die einige Zeit braucht, um ihren Prozess abzuschließen. Daher plane ich, das Prozessbild bis zum Ende anzuzeigen.

Bitte sehen Sie sich das Beispiel hier an. Wenn der Benutzer auf die Schaltfläche klickt, wird der Prozess gestartet. Hier setze ich setTimeout-Funktion, um Verzögerung zu machen. Aber das Verarbeitungsbild wird nicht angezeigt.

Sample Code

Wenn ich den Code bin Platzierung für das Ausblenden des Bildes innerhalb SetTimeout Funktion es funktioniert.

Aber im tatsächlichen Code, der auch nicht funktioniert.

Auch habe ich versucht, mit

$.when($("#loaderImg").show()).done(function(){ 
showSomeProcess() 
$("#loaderImg").hide(); 
}) 

Also bitte mir mit diesem Beispielcode zu helfen. Ich verstehe nicht, warum das Verarbeitungsbild nicht angezeigt wird.

Answer 1

Verwendung der Versprechen wird Ihr Problem lösen. Aktualisiert Geige auch https://jsfiddle.net/3espztjw/5/

$("#startProcess").click(function(){ 
    $("#loaderImg").show(); 
    $.when(showSomeProcess()).then(function(){ 
     $("#loaderImg").hide(); 
    }) 
}); 
var showSomeProcess=function(){ 
    var deferred = jQuery.Deferred() 
    $("#progress").html("Process started"); 
    setTimeout(function(){ 
     $("#progress").html("Process end"); 
     deferred.resolve(); 
    },3000); 
    return deferred.promise(); 
} 

Answer 2

Technisch gesehen ist die setTimeout() Funktion nicht ausgeführt in Fluss. Es unterbricht die synchrone Sequenz. Dies bedeutet nicht, dass es asynchron ist und auf einem separaten Thread ausgeführt wird. Es führt es nur außerhalb der Reihenfolge aus. Also wird die hide() Funktion ausgeführt, bevor die Aufgabe tatsächlich abgeschlossen ist und wir den Lader nicht sehen.

Es ist asynchron (teilweise) aber definitiv nicht auf gleichzeitig Thread ausgeführt.

Also, so etwas wie dieser Code nicht funktioniert tatsächlich wie erwartet:

$("#loaderImg").show(); 
    setTimeout(function(){ 
     $("#progress").html("Process end"); 
    },3000); 
$("#loaderImg").hide(); 

Die Haut Funktion ausgelöst wird, bevor 3 Sekunden abgeschlossen sind.

Dies kann helfen, wenn Sie den Lader nach 3secs ausblenden mögen:

$("#loaderImg").show(); 
    setTimeout(function(){ 
     $("#progress").html("Process end"); 
     $("#loaderImg").hide(); 
    },3000); 

Auch, weil setTimeout() läuft nicht mehr synchron mit der Sequenz bedeutet es nicht, verbessert die Leistung, weil sein Lauf auf dem gleichen Thread .

ein Beispiel, das nicht wie erwartet funktioniert:

$(function() { 
 
    $('div').html("Started"); 
 
    setTimeout(function(){ 
 
    $('div').html("Working"); 
 
    },3000); 
 
    $('div').html("Finished"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
</div>

Sie sicherlich bemerkt, wie die Reihenfolge, in der obigen Schnipsel geht.

Einige Arbeitscode:

$(function() { 
 
    $('div').html("Started"); 
 
    $('div').html("Working"); 
 
    setTimeout(function() { 
 
    $('div').html("Finished"); 
 
    }, 3000); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
</div>