So erzwingen Sie die Aktualisierung Chrome, Safari

Question

In meiner Website habe ich einen Prozess zum Herunterladen von JSON-Daten. Während dieser Zeit zeigte ich im Vollbildmodus ein div mit einem Spin. Mit FF und IE ist das Div vor dem Starten des Downloads sichtbar, aber nicht mit Chrome und Safari.

JSFiddle Link hier: https://jsfiddle.net/r6s0cr31/4/, die Hintergrundfarbe ändert sich nicht in Chrome und Safari, für IE & FF die Hintergrundfarbe vorher ändern.

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

Wenn ich einen Haltepunkt in der Konsole (Chrom) platzieren, bevor getJSON, kann ich sehen, dass die div rechts angezeigt wird. Ich habe versucht, das in reinem JS ohne JQuery zu tun, aber das Problem scheint das gleiche zu sein.

Vielen Dank im Voraus für Ihre Hilfe

Answer 1

Statt sync verwenden (die den Browser einfrieren), mit async und versteckt es nach der Reaktion erhalten wird, das Problem zu lösen:

$('#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/

Answer 2

Es scheint, wie Chrome und Safari sind die Funktion zunächst ein rerendering Seiteninhalt laufen, nachdem es die Ausführung ist. Daher wird keine Änderung gesehen.

Als Andy Chen schrieb bereits, ist es besser, asynchron zu gehen, auch in Bezug auf die Benutzererfahrung:

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

Answer 3

Sie ein in Chrom-Code zu, dass veraltete async falsch irrelevant werden mit einem Timeout friert vor Ajax-Aufruf löst das Problem

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

In Ihrem Fall wird der Code ausgeführt, aber seine nach Rückruf

Geige gesehen Arbeiten hier https://jsfiddle.net/r6s0cr31/5/

Answer 4

Vielen Dank für Ihre Antwort, ich gelernt: - Keine asynchrone Anforderung einfrieren. Chrome & Safari - Chrome und Safari führen die Funktion zuerst aus und aktualisieren danach das Seitendesign.

Danke nochmal