Wie erzwinge synchrone Ausführung von getJSON?

Für ein Schulhistorie-Projekt mache ich eine Timeline-Webseite (live here). Um zu vermeiden, dass die Details für jeden wiederholt eingegeben werden müssen, lege ich sie in eine Tabelle und exportiere sie als JSON.Wie erzwinge synchrone Ausführung von getJSON?

Im Nav habe ich Links mit dem Jahr des Ereignisses mit Javascript erstellt.

Ich möchte dann slick.js, ein jQuery-Plugin, verwenden, um das Nav in ein Karussell zu verwandeln, wie die /links-test-static.html der oben verlinkten Live-Website demonstriert.

Mein Code:

$(document).ready(function(){ 
     $.getJSON("data.js", function(result){ 
     for (var i = 0; i < result.length; i++){ 
      var string = JSON.stringify(result[i]); 
      var parsed = JSON.parse(string); 

      $('.slider').append("<li><a href=\"#" + parsed.number + "\">" + parsed.year + "</a></li>"); 
     } 
     }); 

     $('.slider').slick({ 
     slidesToShow: 8, 
     slidesToScroll: 5, 
     autoplay: true, 
     autoplaySpeed: 3000 
     }); 
    });

Die Links werden erstellt, aber der Schieber nicht. Ich habe eine Seite, wo die Links erstellt werden nicht mit JSON, und es hat gut funktioniert.

Ich denke, das Problem liegt daran, dass die Methode getJSON asynchron ist, also versucht der Browser den Slider zu erstellen, bevor irgendwelche Elemente dem Slider hinzugefügt werden. Erstens, ist dies das Problem? Wenn ja, wie kann man das am besten beheben?

Quelle

2016-06-06 Katherine Huang

Sie können‘ t tu das. Sie sollten Versprechungen verwenden. – SLaks

Anstatt zu versuchen, die Benutzeroberfläche zu blockieren, versuchen Sie, asynchron nach dem Herunterladen des JSON Slick aufzurufen. Einfach seinen Aufruf in den Rückruf nach dieser Schleife einfügen. – Bergi

@Bergi Das hat funktioniert, danke! Aus irgendeinem Grund übersah ich die Tatsache, dass ich das tun könnte. –

Sie können dies nicht synchron machen. Mit ES6 können Sie auf asynchrone Aktionen mit async und await warten, aber was es tut, ist im Wesentlichen das Gleiche wie das, was Sie tun müssen, damit dies funktioniert.

Sie müssen Ihren $('.slider').slick(... Code innerhalb des $.getJSON Rückrufs stecken. Sie sollten den Schieberegler erst initialisieren, wenn der asynchrone Rückruf erfolgt ist.

Quelle

2016-06-06 20:59:45

Nicht sicher, ob dies für Ihre konkrete Frage hilft, aber Sie können tatsächlich synchrone JSON-Anfragen machen.

Die asynchrone Anforderung würde (in Vanille JS) sein:

var request = new XMLHttpRequest(); 
request.open("GET", "/bar/foo.txt", true); // Note the `true` here. 
request.send(null);      // When set to true, the request 
             // will be asynchronous. 
if (request.status === 200) { 
    console.log("ok"); 
}

Während die synchrone Anforderung würde:

var request = new XMLHttpRequest(); 
request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous 
request.send(null); 

if (request.status === 200) { 
    console.log("ok"); 
}

Sie haben eine Dokumentation hier: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

Quelle

2016-06-06 21:29:57

Wie erzwinge synchrone Ausführung von getJSON?

Antwort

Verwandte Themen