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

Posted 2023-02-22

【中文标题】如何强制 DOM 在 ajax 查询之前和之后更新/刷新？

【英文标题】：How do I force DOM to update/refresh just before and after an ajax query?

【发布时间】：2011-07-07 19:34:57

【问题描述】：

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

$("#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 更新显示。

【问题讨论】：

在$("#busysymbol").hide(); 之前做alert('Hello') 看看会发生什么

添加 alert('Hello') 确实会强制 $("#busysymbol") 显示。这很好，因为它证明了程序流程是正确的，但是，如果警报不存在，则不会发生 DOM 更新，忙碌符号保持隐藏。

【参考方案1】：

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

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

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

  
);

【讨论】：

注意：这家伙有“async: false”，所以它告诉它同步执行。所以他们这样做是因为异步标志，而不是尽管如此。

【参考方案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()。

【讨论】：

您好，谢谢您的建议。这似乎是同步请求的问题。我将 ajaxStart() 和 ajaxStop() 添加到 $("#busysymbol") 中，它适用于页面上的所有其他异步查询，但不适用于同步查询（好吧，无论如何，使用 Safari 和 Chrome，Firefox 似乎还可以)。

想不出绕过同步的方法。 ajax用于返回值的函数，需要ajax完成才能返回。

有趣的是，你提到 .position() 不带任何参数。我在查找函数时去了jqueryui.com/demos/position这些文档说有几个争论，而且我已经看到了这个功能在所有浏览器中都有效的证据。

@user631798: .position() 的那些参数是jQuery UI 扩展名，在普通jQuery 中不起作用。您没有提到您正在使用 jQuery UI，但如果您这样做了，那么您可以使用它。只要确保在您的页面中包含 jQuery UI，它应该可以正常工作。我仍然建议尝试它是否可以在不重新定位 #busysymbol 的情况下工作，如果它可以工作，那么请尝试在一开始就添加正确的定位。

@user631798：同步 XHR 请求会导致很多问题，其中一个是您遇到的问题，另一个是您在请求时阻塞了页面的整个用户界面，在开发过程中这对您来说可能不是问题，但您的用户会在生产中注意到它并认为他们的浏览器挂起或您的网站已损坏。您不必在等待响应时阻塞，这就是回调的用途。可用时在回调中使用您的数据。尝试使用与我提供的示例类似的东西。