javascript - 如何强制刷新 Chrome、Safari

Question

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

JSFiddle 链接在这里:https://jsfiddle.net/r6s0cr31/4/ ，背景颜色在 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();

如果我在 console(chrome) 中的 getJSON 之前放置一个停止点，我可以看到 div 正确显示。我尝试在没有 JQuery 的情况下在纯 JS 中做到这一点，但问题似乎是一样的。

预先感谢您的帮助

Answer 1

不使用同步(卡住浏览器)，使用异步并在获得响应后将其隐藏将解决问题:

$('#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();
    })    
})

https://jsfiddle.net/r6s0cr31/7/