除非我在 javascript 中添加警报，否则绑定到 ajax 调用的微调器将不会显示答案

【问题标题】：Spinner bound to ajax call will not display unless I put an alert in the javascript除非我在 javascript 中添加警报，否则绑定到 ajax 调用的微调器将不会显示
【发布时间】：2014-02-11 20:50:36
【问题描述】：

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

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

【问题讨论】：

只是一个疯狂的猜测，因为您没有包含您的 ajax 代码，但是...从您的 ajax 请求中删除 async: false。
我不得不承认，这就是你这里的脚本......为什么不创建一个简单的 ajax 函数并在该函数中触发微调器开始时显示，然后在完成时隐藏？跨度>
@KevinB 删除 'async: false, ' 工作，不错的电话！
@VIDesignz 我不想为我拥有的每个 ajax 调用实例都这样做，我还计划让这个方法更可定制，我传入一个具有不同参数的更健壮的对象用于不同的用途。

标签： javascript jquery ajax

【解决方案1】：

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

删除async: false

【讨论】：