JMR JMR - 6 months ago 14
Javascript Question

Line Code fails to execute until event "drop" is finished

Tools: JQuery, Node.js, Electron, Windows

Using JQuery I attach a function to be executed on "drop" event.

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();
};


It's the
loading.show()
line that won't get executed until all the files are done and over with. It's supposed to make a gif (loader) visible so the user doesn't think the app went haywire while processing the 20+ files they dragged over. The think is, it's like the line won't get executed until the whole function is finished, because the gif never shows. If I do a
console.log()
same thing happens. First all files get processed then the log occurs. I'm at a loss.

Thanks.

JMR JMR
Answer

Apparently the loading.show() won't work until function onDragDrop(evt) is finished. So I looked at the code and isolated the part that takes the longest and does the most processing. I took that part and placed it in a separate function and called it asynchronously (someone correct me if I am wrong for calling it that) with 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);    
 };

That's it. Now the loader spinning gif shows up since the onDragDrop event finishes completely. The heavyLoad(...) is obviously in charge of doing loading.hide(); when it's done.

Comments