Question

我编写了一个简单的方法，将一个微调器添加到html页面的主体中，并将事件绑定到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调用之前调用该方法，并使用spinner gif的uri传递一个对象，但除非我有警报，否则不会显示微调器和背景。我尝试在各个地方添加setTimeout()function{/*do some code*/},1000)，但这似乎没有帮助。

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

Answer 1

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

删除async: false

除非我在javascript中发出警报，否则不会显示绑定到ajax调用的微调器

1 个答案: