1

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

我想在代码关闭时显示进度光标，因为用户将等待并观看操作完成，但是尽管 CSS 已更新为“光标：进度”，但浏览器 UI 不会更新（火狐 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 循环是多余的，这改变了问题\问题。

4

2 回答 2

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) {}
            });
于 2013-09-20T21:09:39.140 回答
0

使用 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);
于 2013-09-21T23:30:14.287 回答