ラインコードは、イベントが発生するまで実行に失敗し、「ドロップ」は

Question

ツールを終了します。

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イベントが完全に終了してから表示されます。 heavyLoad（...）は明らかにloading.hide();を担当しています。