Google Chrome浏览器 - 显示和隐藏元素

Question

这是我的示例代码（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. anyElement - ＆gt;点击
2. 进度 - ＆gt;显示
3. 函数返回ajax的结果：reqest - ＆gt; 2秒后服务器响应
4. 进度 - ＆gt;隐藏
5. resultDisplay - ＆gt;显示ajax的结果

但是铬：

1. anyElement - ＆gt;点击
2. 函数返回ajax的结果：reqest - ＆gt; 2秒后服务器响应
3. resultDisplay - ＆gt;显示ajax的结果

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

Answer 1

这是你可以尝试的东西。

在settimeout中包装你的ajax调用，这样Chrome就有时间实际显示进度元素。

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

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

Answer 2

取决于你的ajax调用以及它的包装听起来像chrome不等待它完成，然后再转到下一行代码。根据定义，ajax调用是异步的，因此javascript在继续之前不会等待调用完成。 这意味着您的代码正在调用progress.show()然后调用ajax然后调用progress.hide()，但由于ajax调用是异步的，因此progress.show()和progress.hide()正在调用相互之间 - 即如此之快，以至于很难记录它们的效果 jQuery有一个$.when()函数，等待你的ajax调用完成后再转到代码的下一位。

Answer 3

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

$.ajax({
     ...
     success: function() {
          $('#progress').hide() ;
          $('#resultDisplay').show() ;
     }
});