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

Question

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

我想在代码停止工作时显示一个进度光标，因为用户将等待并观察操作完成，但是尽管 CSS 已更新为“cursor: progress”，但浏览器 UI 不会t更新(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 光标 beforeSend 方法并使用 complete 方法将其返回正常:

           $.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) {}
            });