如何强制刷新 Chrome、Safari答案

【问题标题】：How to force refresh Chrome, Safari如何强制刷新 Chrome、Safari
【发布时间】：2017-02-07 11:00:41
【问题描述】：

在我的网站中，我有一个下载 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();

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

提前感谢您的帮助

【问题讨论】：

标签： javascript styles refresh

【解决方案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/

【讨论】：

【解决方案2】：

在 ajax 调用超时将解决问题之前，您正在使用与 chrome 代码冻结无关的已弃用 async false

 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);

在您的情况下，代码被执行，但在回调后可见

在这里工作https://jsfiddle.net/r6s0cr31/5/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

再次感谢

【讨论】：