谷歌浏览器 - 显示和隐藏元素

Google Chrome browser - show and hide elements

本文关键字：隐藏 元素 显示 谷歌浏览器      更新时间：2023-09-26

这是我的示例代码（jQuery）：

$('#anyElement').click(function() {
    $('#progress').show() ;
    /**
    loading result with ajax
    time it about 2 sec.
    */
   $('#progress').hide() ;
   $('#resultDisplay').show() ; // display result of ajax
}) ;

所有浏览器（不是 Chrome）都可以：

  1. 任意元素 ->点击
  2. 进度 ->显示
  3. 函数返回 ajax 的结果：reqest -> 服务器在 2 秒后响应
  4. 进度 ->隐藏
  5. 结果显示 -> 显示 ajax 的结果

但是铬：

  1. 任意元素 ->点击
  2. 函数返回 ajax 的结果：reqest -> 服务器在 2 秒后响应
  3. 结果显示 -> 显示 ajax 的结果

当我为开发人员使用工具并且代码逐步执行时，一切正常。有人可以向我解释一下吗？谢谢。

这是你可以尝试的。

将您的 ajax 调用包装在设置超时中，这样 Chrome 就有时间实际显示进度元素。

setTimeout(function() {
    //Code to run your ajax call and hide the progress image.
},250)

这只会增加 1/4 秒的延迟，事实上，您可以尝试并将其降低到更小的延迟，但它返回浏览器的控制权以实际更新向用户显示的元素。

根据您的 ajax 调用及其包装方式，听起来 chrome 不会等待它完成，然后再继续下一行代码。 根据定义，Ajax 调用是异步的，因此 JavaScript 不会等待调用完成才继续。这意味着您的代码正在调用progress.show()然后ajax然后progress.hide()但是由于 ajax 调用是异步的，因此progress.show()和progress.hide()彼此相邻调用 - 即，速度如此之快，以至于很难注册它们的效果。
jQuery有一个$.when()函数，它将等待ajax调用完成，然后再继续下一段代码。

有可能您的 AJAX 调用异步设置为 false 并且进度是 gif 加载器，然后 gif 由于同步调用而在 Chrome 上停止移动。如果是这种情况，则解决方案是不使用同步调用。您可以在 ajax 完成时隐藏进度。

$.ajax({
     ...
     success: function() {
          $('#progress').hide() ;
          $('#resultDisplay').show() ;
     }
});
相关文章：