jquery - 如何强制 DOM 在 ajax 查询之前和之后更新/刷新？

Question

我的浏览器“忙碌”图标出现问题。代码如下所示:

$("#busysymbol").show();
$("#busysymbol").position({my:"right top",at:"right top",of:$("#datepicker"),offset:"-3 3"});
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1",
        cache: false,
        async: false
        }).responseText;
$("#busysymbol").hide();
var daysInMonth = resp.split(",");
...etc...

此代码在 Firefox 中完美运行，但在 Chrome 和 Safari 中，忙碌符号未显示。我相信 Chrome 和 Safari 正在缓存对 DOM 的更改，并且 $("busysymbol").show() 调用不会立即刷新。

有没有办法强制 Chrome/Safari 更新显示。

Answer 1

也许尝试使用ajaxStart和 ajaxStop您忙碌的象征的全局事件。 例如:

$("#busysymbol").ajaxStart(function(){
    $(this).show();
});
$("#busysymbol").ajaxStop(function(){
    $(this).hide();
});

在代码的开头，并从特定的 .ajax() 处理程序中删除隐藏和显示。

哦，我刚刚注意到您正在使用同步请求，所以它甚至不是 AJAX – 更像是 SJAX。在等待请求完成或超时时，您是否有充分的理由完全阻止浏览器的用户界面？如果没有，请尝试使用这样的东西:

$("#busysymbol").hide();
$("#busysymbol").ajaxStart(function(){
    $(this).show();
});
$("#busysymbol").ajaxStop(function(){
    $(this).hide();
});
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1",
        cache: false,
        success: function (resp) {
            var daysInMonth = resp.split(",");
            ...etc...
        }
});

(未测试)

尝试在不重新定位 #busysymbol 的情况下它是否有效，然后尝试在开始时添加正确的定位。请记住，.position() 不接受参数，因此代码中最长的行实际上没有执行任何操作 - 请参阅 the docs 。您需要的是 .offset() 或 .css()。