Javascript 如何强制刷新Chrome、Safari

在我的站点中，我有一个下载JSON数据的过程。在此期间，我全屏显示了一个旋转的div。 在FF和IE中，div在开始下载之前是可见的，但在Chrome和Safari中则不可见

jshiddle link here:，Chrome和Safari上的背景色不会改变，对于IE&FF来说，背景色之前会改变

$('#mapLoading').show();
$.ajaxSetup({async: false});
$.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true",
   function( response ) {

   }
)
$('#mapLoading').hide();

如果我在控制台（chrome）中的getJSON之前放置一个停止点，我可以看到div是正确显示的。 我试图在没有JQuery的纯JS中实现这一点，但问题似乎是一样的

---

提前感谢您的帮助

看起来Chrome和Safari正在首先运行该功能，并在执行后重新呈现页面内容。因此，没有看到任何变化

正如Andy Chen所写，即使在用户体验方面，也最好采用异步方式：

$('#btn').click(function(){
    $('#mapLoading').show();
    $.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true",
       function( response ) {

         /* ...code here... */
         $('#mapLoading').hide();
       }
    )
})

---

您使用的是一个不推荐使用的async false，它与在ajax调用超时解决问题之前的chrome代码冻结无关

 setTimeout(function () {
$.ajaxSetup({async: false});
$.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true",
   function( response ) {

   }
)
$('#mapLoading').hide();
}, 20);

在您的例子中，代码被执行，但它在回调后被看到

在这里使用fiddle而不是使用sync（冻结浏览器），使用async并在获得响应后隐藏它将解决问题：

$('#btn').click(function(){
    $('#mapLoading').show();
    $.getJSON("https://router.project-osrm.org/route/v1/driving/0,40;0,42?overview=full&alternatives=true&steps=true")
    .then(function(response){
        $('#mapLoading').hide();
    })    
})

---

谢谢你的回复，我了解到： -无异步请求冻结Chrome和Safari -Chrome和Safari首先运行该功能，然后更新页面设计

再次感谢