Liniencode nicht ausgeführt werden, bis das Ereignis „drop“ beendet ist

Question

Werkzeuge: JQuery, Node.js, Elektron, Windows-

mit JQuery Ich lege eine Funktion auf „drop“ Ereignis ausgeführt werden.

area.on("drop", {"extensionHandler":extensionHandler, "dropHandler":dropHandler}, onDragDrop).bind(this); 

function onDragDrop(evt){ 
    if(!isValidDragDrop(evt)) 
     return; 

    loading.show(); <----- THIS LINE is the problem 

    var validExtension = evt.data.extensionHandler; 
    var fileListHandler = evt.data.dropHandler; 

    var filesDragged = evt.dataTransfer.files.length; 

     //Treat dragged files 
     //.... 
     // more code.... 

    loading.hide();  
}; 

Es ist die loading.show() Linie, bis alle fertig sind die Dateien werden nicht ausgeführt und über mit. Es soll ein gif (loader) sichtbar machen, damit der Benutzer nicht denkt, dass die App drunter und drüber gegangen ist, während sie die 20+ Dateien bearbeitet hat, über die sie gezogen haben. Das Denken ist, es ist wie die Linie wird nicht ausgeführt, bis die ganze Funktion beendet ist, weil das gif nie zeigt. Wenn ich eine console.log() gleiche Sache passiert. Zuerst werden alle Dateien verarbeitet, dann erfolgt das Protokollieren. Ich bin ratlos.

Danke.

Answer 1

Anscheinend loading.show() wird nicht funktionieren, bis function onDragDrop(evt) ist fertig. Also habe ich mir den Code angesehen und den Teil isoliert, der am längsten dauert und am meisten verarbeitet. Ich nahm diesen Teil und platzierte ihn in einer separaten Funktion und nannte ihn asynchron (jemand korrigiert mich, wenn ich falsch liege, um ihn so zu nennen) mit setTimeOut.

function onDragDrop(evt){ 
    if(!isValidDragDrop(evt)) 
     return; 

    loading.show(); <----- THIS LINE is the problem 

    var validExtension = evt.data.extensionHandler; 
    var fileListHandler = evt.data.dropHandler; 

    var filesDragged = evt.dataTransfer.files.length; 
    ...... 

    setTimeout(function(){ heavyLoad(filesDragged, fileListHandler); }, 10);  
}; 

Das ist es. Jetzt zeigt der Lader spinnende Gif auf, da das onDragDrop Ereignis vollständig beendet wird. Die heavyLoad (...) ist offensichtlich dafür zuständig, loading.hide(); zu tun, wenn es fertig ist.