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 並使按鈕不可見