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"
      });

    });