html 遮掩式弹窗

        function addDiv() {//添加弹出窗体
            $('<div id="divCell" style="position:absolute;background-color:#fbfbfb;z-index:1;top:50%;width:300px;height:120px;left:50%;border:1px solid #fbfbfb;box-shadow:10px 10px 5px #888888;border-radius:5px;margin-top:-60px;margin-left:-150px;text-align:center;line-height:120px;user-select:none;">正在运行，请等待...</div>').appendTo('body');
            $('<div id="lightbox" style="position:absolute;top:0;bottom:0;left:0;right:0;background-color:#000;opacity:.3;"></div>').appendTo('body');
        }
        function deleteDiv() {//关闭弹出窗体   等任务执行完毕执行这个
            var my = document.getElementById("divCell");
            if (my != null)
                my.parentNode.removeChild(my);

            var lightbox = document.getElementById("lightbox");
            if (lightbox != null)
                lightbox.parentNode.removeChild(lightbox);
        }

要想实现点击按钮等待可以利用ajax简洁写法

 $.ajax({
                type: "get",
                url: "http://localhost:4000/slam_optimize",
                beforeSend: function () { 
                   
                    addDiv()
                },
                success: function (msg) {
                    var cur_build = msg

                    if (cur_build == "") {
                        console.log("没有选择优化图片: ");
                        alert("没有选择优化图片");
                        return;
                    }
                    console.log("准备下载: " + cur_build);

                    download_curmap(cur_build)
                    
                    
                },
                error: function (e, jqxhr, settings, exception) {
                    deleteDiv()
                    alert("地图优化失败！");
                }
            })