行代码无法执行，直到事件 "drop" 完成

Question

工具：JQuery、Node.js、Electron、Windows

使用 JQuery 我附加了一个要在 "drop" 事件上执行的函数。

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

这是 loading.show() 行，在所有文件完成并结束之前不会执行。它应该使 gif（加载器）可见，这样用户就不会认为应用程序在处理他们拖过的 20 多个文件时出现了问题。想法是，这就像在整个函数完成之前不会执行该行，因为 gif 从不显示。如果我做 console.log() 同样的事情会发生。首先处理所有文件，然后出现日志。我很茫然。

谢谢。

Answer 1

显然 loading.show() 在 function onDragDrop(evt) 完成之前不会工作。所以我查看了代码并分离出花费时间最长且处理最多的部分。我把那部分放在一个单独的函数中并用 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);    
 };

就是这样。现在 loader 旋转 gif 出现了，因为 onDragDrop 事件完全完成。 heavyLoad(...) 完成后显然负责做 loading.hide();。

行代码无法执行，直到事件 "drop" 完成

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

windows

jquery

electron