在事件“drop”完成之前行代码无法执行答案

【问题标题】：Line Code fails to execute until event "drop" is finished在事件“drop”完成之前行代码无法执行
【发布时间】：2016-08-29 05:04:29
【问题描述】：

工具：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() 会发生同样的事情。首先处理所有文件，然后出现日志。我很茫然。

谢谢。

【问题讨论】：

标签： jquery windows electron

【解决方案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);    
 };

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

【讨论】：