jquery - drop event or event.dataTransfer.files seem to cause weird mix up in the order of execution

Question

I have trouble understanding the order in which my script is beeing executed

i've got the following code in my jQuery drag and drop plugin

    //...
    drop : function( event ) {
        event.stopPropagation();
        event.cancelBubble = true;
        event.preventDefault();

        $(this).removeClass("dropboxHover");

        methods.processFiles(event.dataTransfer.files);
    },
    //...

what i don't understand is, why my script first processes the file list (what takes quite some time) and then removes the class after everything else is done.
Shouldn't it be the other way around?
So after letting go of the mouse it takes seconds until one sees a visual effect. That suggests that the browser froze or something.

help or code is appreciated A LOT!

Answer 1

尝试将 processFiles 包装在 setTimeout 0 中：

//...
drop : function( event ) {
    event.stopPropagation();
    event.cancelBubble = true;
    event.preventDefault();

    $(this).removeClass("dropboxHover");

    setTimeout(function(){methods.processFiles(event.dataTransfer.files);}, 0);
},
//...