JQuery控制程序執行順序

Question

我正在嘗試通過 CSS 顯示加載程序，而 JS 做了一些工作。 加載程序工作正常，但程序執行不准確。

理想情況下，加載程序應在單擊按鈕時顯示，並且應在 JS 完成顯示數據時結束。 但在我的例子中，它首先處理 JS 功能，一旦完成，它就會顯示加載器。

下面分享的代碼

$(".sebtn").on("click",function(){

    // LOADER SHOW
    $("#loader").css({
        display: "inline-block",
        visibility: "visible"
      });

    // JS FUNCTIONALITY
    rdNetworkLyr.eachLayer(function (layer) {
        layer.setStyle({color:'#F2F3F5'});
        for (const key in se_am.XDSegID){
            if(se_am.XDSegID.hasOwnProperty(key)){
                if(layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'A'){
                    layer.setStyle({color:'#060'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'B'){
                    layer.setStyle({color:'#9f0'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'C'){
                    layer.setStyle({color:'#ff3'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'D'){
                    layer.setStyle({color:'#f90'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'E'){
                    layer.setStyle({color:'#f60'})
                }
                else if (layer.feature.properties.XDSegID === se_am.XDSegID[key] && se_am.los[key] === 'F'){
                    layer.setStyle({color:'#c00'})
                }
            }
        }
        });

    // LOADER HIDE
    $("#loader").css({
        display: "none",
        visibility: "hidden"
      });

    });