如何避免元素 <input type="file"> onChange 事件的延迟

Question

我遇到了一个问题。我有一个input元素和函数来显示“加载”动画。问题是，一旦我放下文件或单击并选择它们，“加载”动画就会显示几秒钟的延迟（多个文件或大文件）。

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

解决方案一：

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读取数据或执行其他操作？

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