试图在Ajax之前/期间调用dimmer/throbber

Question

这是我想做的事。

有个表格。表单有一个提交按钮。提交按钮的onMouseDown()事件是：

<input type='submit' value='Search' name='save' id='save' onmousedown = 'DimOn("test.php", "SearchResultDiv")' />

现在，一旦按钮被点击，我希望它按正确的顺序做三件事。

1)翻页。

2)执行Ajax查询，并填充搜索结果。

( 3)拆下底座。

编辑：

甚至尝试使用beforeSend，并在jQuery对象中完成事件

function DimOn(sUrl, sElement) 
{
    jQueryAjax(sUrl, sElement);
}

function jQueryAjax(sUrl, sElement) 
{
    $.ajax({
        url: sUrl,
        type: 'GET',
        async: false,
        cache: false,
        timeout: 1000,
        beforeSend: function(){
            $('#dim').fadeIn();
        },  
        complete : function(){
            $('#dim').fadeOut();
        },      
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (msg != '')
                PopulateResponse(msg, sElement, false);
            else 
                PopulateResponse("An Error Has Occured.", sElement, false);
        }
    });
}

目前，它似乎是这样做的：

2)执行Ajax查询，并填充搜索结果。

( 2)翻页。

( 3)拆下底座。

当结果填充时(耗时10秒)，调光器很快就会上下闪烁。

请借给我一位程序员同事，我对这种技术并不陌生，也不知道为什么我关闭了异步，试着让事情有条不紊地发生，但仍然没有骰子。

Answer 1

我用这个函数解决了这个问题：

function jax(sUrl, sElement, bEval, sType, bAsync) 
{
    $.ajax({
        url: sUrl,
        type: sType,
        async: true,
        cache: false,
        timeout: 30000,
        error: function()
        {
            return true;
        },
        beforeSend: function(){
            $('div#dim').fadeIn(400);
        },  
        complete : function(){
            $('div#dim').fadeOut(200);
            if(sUrl.search(/scroll=true/ig) != -1)
                goToByScroll(sElement);

        },                      
        success: function(msg){ 
            if (msg != '')
            {
                PopulateResponse(msg, sElement, bEval);
            }
            else
            {
                PopulateResponse("An error has occurred.", sElement, bEval)
                //Coming soon, ajax call to php file to log javascript failure.
            }
        }
    });
}    

这个CSS

div#dim
{
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity:.6;
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1005;
    display:none;
    cursor:wait;
}

div#dim div
{

    position:relative;
    top:400px;
    z-index:1006;
    text-align:center;
    cursor:wait;
}

div#dim div img
{
    z-index:1007;
    text-align:center;
    border:none;
    cursor:wait;
}

和这个HTML

<div id='dim'><div style="text-align:center;"><img src="Images/Loading/loading10.gif" alt="Loading... please wait" title="Loading... please wait" /></div></div>