如何强制 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

我认为 Chrome 和 Safari 正在同步执行您的 Ajax 请求，尽管有 aynch 标志。为了解决这个问题，您可以在 ajax 函数的回调中隐藏图标，如下所示：

$.ajax({
  url: 'book_ajax.php?req=daysformonth&month=1',
  success: function(data) {

    $("#busysymbol").hide();

  }
});

Answer 2

也许可以尝试使用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()。