Question

我遇到了问题。我有一个input元素和函数来显示＆＃34; loading＆＃34;动画。问题是，一旦我删除文件或点击并选择它们＆＃34; loading＆＃34;显示延迟几秒钟的动画（多个文件或大尺寸文件）。

注意：使用Angular 2+制作的解决方案是(change)

的原因

解决方案1：

HTML：

<input type="file" multiple="true" (change)="uploadImgs($event)"/>

JS：

uploadImgs(event: any) {
console.log('START UPLOAD!')
this.spinnerService.start();
///restOfTheLogic...}

解决方案2：使用onDrop事件触发显示动画的this.spinnerService.start();

HTML：

<div (drop)="spinnerService.start();">
            <input type="file" multiple="true (change)="uploadImgs($event)"/>
        </div>

解决方案3：使用onChange/onDrop

触发两个功能

HTML：

<input type="file" multiple="true (change)="spinnerService.start(); uploadImgs($event)"/>

输出：在删除文件后的所有情况下，我都可以立即在控制台中看到console.log('START UPLOAD!')输出，但在动画实际出现之前它会延迟。

动画功能简单：

start() {
document.getElementById('loading').classList.remove('hidden');

}

我试着自己搜索。但是为什么第一行console.log被立即执行而第二行this.spinnerService.start();被延迟执行？在使用DOM元素进行操作之前，是否正在等待files数据被读取或其他内容？

有什么想法可以避免这种延迟吗？