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

那就是它。现在， onDragDrop 事件完成后， loader spinning gif 显示出来。 heavyLoad（...）显然是在loading.hide();完成后负责。

线路代码无法执行，直到事件“丢弃”完成

1 个答案: