除非我在javascript中发出警报，否则绑定到ajax调用的微调器将不会显示 [英] Spinner bound to ajax call will not display unless I put an alert in the javascript

问题描述

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

I wrote a simple method that adds a spinner to the main body of an html page and binds the event to an ajaxstart method then removes it on the 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的对象，但是除非有警报，否则不会显示Spinner和背景.我曾尝试在各个地方添加 setTimeout()函数{/*做一些代码*/}，1000)，但这似乎无济于事.

I call the method before an ajax call and pass it an object with the uri of the spinner gif, but the spinner and background do not display unless I have an alert. I have tried adding a setTimeout()function{/*do some code*/},1000) in various places, but that did not seems to help.

我在此问题中看到了类似的问题发布，但setTimeout似乎无济于事.有什么想法吗?

I saw a similar issue in this posting but the setTimeout does not seems to help. Any ideas?

推荐答案

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

If your ajax request is being sent synchronously, the browser will be locked up immediately before it has time to render the spinner. When it's done, it will immediately hide the spinner, thus causing it to not display at all. The alert gave the browser enough time to render the spinner before sending the ajax request.

删除 async:false

这篇关于除非我在javascript中发出警报，否则绑定到ajax调用的微调器将不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！