Question

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

我希望在代码停止工作时显示进度光标，因为用户将等待并观察操作完成，但尽管CSS已更新为“cursor：progress”，但浏览器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>

编辑：经过一些进一步的测试后，显然Dialog与问题无关，这个问题与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方法，并使用完整方法将其恢复为正常：

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

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

2 个答案: