Javascript - 实现加载微调器的最佳方式

Question

网络开发的新手，并尝试全神贯注于处理 DOM。 想要实现一个在处理数据时出现并在之后消失的微调器。 我认为顺序应该是这样的

1. 按下按钮时，使微调器可见并调用数据 function
2. 数据 function 完成后再次使微调器不可见

使用引导程序 5

当前的实现是沿着这些方向的：

document.getElementById("button").addEventListener("click",function(){document.getElementById("spinner").classList.toggle("invisible");})
document.getElementById("button").addEventListener("click",dataProcess());
document.getElementById("button").addEventListener("click",function(){document.getElementById("spinner").classList.toggle("invisible");})

我知道添加事件侦听器的顺序是它们执行的顺序，但是微调器不会切换，因为 DOM 在执行所有函数之前不会更新（因为它切换了两次，然后它再次不可见） . 有没有一种方法可以在事件之间更新 DOM，或者有更好的方法来完全实现微调器？

Answer 1

document.getElementById("button").addEventListener("click",()=>{
    setTimeOut(()=>{
        document.getElementById("spinner").classList.toggle("invisible")
    },600)
    dataProcess();
    document.getElementById("spinner").classList.toggle("invisible")
});

Answer 2

给数据处理 function 回调 function 并使按钮不可见