如何在 JQuery 对话框中执行 AJAX 操作时更改光标图标

Question

为什么当我打开一个 JQuery 对话框并执行一些 $.ajax 调用时，我不能更改光标？

我想在代码关闭工作时显示进度光标，因为用户将等待并观察操作完成，但是尽管 CSS 更新为"光标：进度"，但浏览器 UI 不会更新（Firefox 23.0.1）。但是，如果我取出 $.ajax 调用并放入一些 setTimeOut 回调来模拟时间流逝，光标将发生变化。知道发生了什么吗？谢谢。

此测试代码重现了该问题：

$( "#dialog-confirm" ).dialog({
                resizable   : true,
                height      : 240,
                modal       : true,
                buttons: {
                    "Take Action": function() {
                            $( "body" ).css( 'cursor', 'progress' );
                            for ( i = 0; i < 2000; i++ ) 
                            {
                                $.ajax({
                                    async   : false,  
                                    type    : 'GET',
                                    url     :  "test2.html", 
                                    cache   : false,
                                    dataType: 'html',   
                                    success : function(data) {
                                        $("#junk").append ( data + "number: " + i );
                                    },
                                    error: function(data) {     
                                    }
                                });
                            }
                            $( "body" ).css( 'cursor', 'default' );
                    },
                    "Exit": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });

测试页 HTML：

                <div id="dialog-confirm" title="Show Something here">
                    <p>
                        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
                        Text of the dialog box here
                    </p>
                </div>
            <div id ="junk"> Some rubbish text so I can see the div </div>
            <div>

这是加载的 HTML 文件：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

编辑：经过一些进一步的测试，很明显对话框与问题无关，这个问题与Javascript的单线程性质以及代码占用处理器而不放弃它的事实有关。下面的评论和答案证明很有帮助，但没有回答我的问题。也更改代码：

var j = 0;  
var set = false;
//for ( i = 0; i < 1000; i++ ) 
{
    setTimeout ( function doStuff () 
    {
        $.ajax({
            async   : false,  
            type    : 'GET',
            url     :  "test2.html", 
            cache   : false,
            dataType: 'html',   
            beforeSend: function () 
            {
                if ( set === false )
                    { $("body").css('cursor', 'wait'); set = true; }
            },
            complete: function () {                        
            },
            success : function(data) {
                $("#junk").append ( data + "number: " + ++j );      
                if ( j === 1000 ) {
                    $( "body" ).css( 'cursor', 'auto' );
                }
            },
            error: function(data) {     
            }
        });
        if ( j < 1000 ) {
            setTimeout(doStuff,20);
        }           
    }, 0);      
}

通过在每次 $.ajax 调用后放弃处理器来解决问题，这并不理想，但它似乎可以工作;

注意：在这个新的测试代码中，for循环变得多余，这改变了问题\问题。

Answer 1

这应该会有所帮助。您可以在发送方法之前更改css光标，并使用完整方法将其恢复为正常状态：

           $.ajax({
                async: false,
                type: 'GET',
                url: "test2.html",
                cache: false,
                dataType: 'html',
                beforeSend: function () {
                    $("body").css({
                        'cursor': 'wait'
                    })
                },
                complete: function () {
                   $("body").css({
                        'cursor': 'default'
                    })
                },
                success: function (data) {
                    $("#junk").append(data + "number: " + i);
                },
                error: function (data) {}
            });

Answer 2

使用 setTimeout 放弃处理器，以便浏览器的 UI 可以更新光标。

setTimeout ( function doStuff () 
{
    $.ajax({
        async   : false,  
        type    : 'GET',
        url     :  "test2.html", 
        cache   : false,
        dataType: 'html',   
        beforeSend: function () 
        {
            if ( set === false )
                { $("body").css('cursor', 'wait'); set = true; }
        },
        complete: function () {                        
        },
        success : function(data) {
            $("#junk").append ( data + "number: " + ++j );      
            if ( j === 1000 ) {
                $( "body" ).css( 'cursor', 'auto' );
            }
        },
        error: function(data) {     
        }
    });
    if ( j < 1000 ) {
        setTimeout(doStuff,20);
    }           
}, 0);