javascript - 绑定(bind)到 ajax 调用的 Spinner 将不会显示，除非我在 javascript 中发出警报

Question

我写了一个简单的方法，将微调器添加到 html 页面的主体并将事件绑定(bind)到 ajaxstart 方法，然后在 ajaxstop 上将其删除。

StartAjaxCallSpinner = function (spinnerObj) {    
    var $bod = $("Body");
    if ($('#bgSpinnerDiv')[0] == undefined && $('#spinnerHolder')[0] == undefined) {
        $bod.append("<div id='spinnerHolder' style='display:none;'></div><div id='bgSpinnerDiv'></div>");
    }

    $('#spinnerHolder')
            .hide()  
            .ajaxStart(function () {
                $('#bgSpinnerDiv').css({ 'background-color': 'black',
                    'height': '100%',
                    'left': '0px',
                    'opacity': '0.7',
                    'position': 'fixed',
                    'top': '0px',
                    'width': '100%',
                    'z-index': '1000001'
                });
                $(this).css({ 'position': 'fixed',
                    'top': '50%',
                    'left': '50%',
                    'width': '130px',
                    'height': '130px',
                    'margin-top': '-65px',
                    'margin-left': '-65px',
                    'z-index': '1000002',
                    'display': 'block',
                    'border': '1px solid black',
                    'border-radius': '5px',
                    'background': " white url('" + spinnerObj.SpinnerUri + "') no-repeat center center"
                });
                $(this).show();
                //alert('test');
            })
            .ajaxStop(function () {
                $(this).hide();
                $('#bgSpinnerDiv').removeAttr("style").unbind('ajaxStart', UnBindAjaxStop($('#bgSpinnerDiv')));
                $(this).removeAttr("style").unbind('ajaxStart', UnBindAjaxStop(this));
            });
};

UnBindAjaxStop = function (me) {
    $(me).unbind('ajaxStop');
};

我在 ajax 调用之前调用了该方法，并向它传递了一个带有微调器 gif 的 uri 的对象，但是微调器和背景不会显示，除非我有一个警报。我尝试在不同的地方添加 setTimeout()function{/*do some code*/},1000)，但这似乎没有帮助。

我在 this posting 中看到了类似的问题但 setTimeout 似乎没有帮助。有什么想法吗？

Answer 1

如果您的 ajax 请求是同步发送的，浏览器将在它有时间呈现微调器之前立即被锁定。完成后，它会立即隐藏微调器，从而使其根本不显示。在发送 ajax 请求之前，警报给了浏览器足够的时间来呈现微调器。

删除 async: false