[Linuus]

Hej

Jag experimenterar lite med en Spotify-app för skojs skull och skulle behöva lite Javascript-tips. Det är lite svårt att förklara dock.... Vi kan säga att det är en app som hämtar låt-texter.

När man byter låt i Spotify gör jag ett AJAX-anrop till ett API som hämtar data över vilka versioner av låten som finns. Denna data använder jag sedan för att skapa några objekt som jag kallar Track. En låt skapar alltså flera Track-objekt som motsvarar olika versioner av en låt.

Typ:

var fetchTracks = function() {
    var throbber = Throbber.forElement(_textArea[0]);
    $.ajax({
        url: "API-URL",
        dataType: 'xml'
    }).done(function(data){
        throbber.hide();
        createTracks(data);
    }).fail(function(){
       console.log("Error");
    });
}


   var createTracks = function(data) {
      _Tracks = [];
      var results = $(data).find('results').attr('count');
      if(results > 0) {
        $(data).find('result').each(function() {
          var that = this;

          $.ajax({
            url: $(that).attr('url'),
            dataType: 'html'
          }).done(function(text) {
            var track = new Track($(that).attr('id'),
                              $(that).attr('name'),
                              $(that).attr('url'),
                              $(that).attr('version'),
                              text);
            _Tracks.push(track);
          }).fail(function(){
            console.log("Error");
          });

        });
      }
    }

Så i createTracks skapas X antal Tracks-objekt. Så, när alla Track-objekt har skapats vill jag anropa en funktion som väljer en text att visa.

- Hur gör jag detta? Alltså, hur vet jag att alla låtar har skapats? AJAX-anropen är ju asynkrona så i slutet på createTracks-funktionen är det ju inte säkert att alla låtar är klara än.

Några idéer? (Om någon förstår överhuvudtaget vad jag menar )

[corneliisandberg]

Hej Linus!
Kanske är fel svar och löser måhända inte ditt problem men du kan göra ajax anropet synkront istället om du vill. Prova om det kan funka för dig med async:false parametern.

var fetchTracks = function() {
var throbber = Throbber.forElement(_textArea[0]);
$.ajax({
async: false,
url: "API-URL",
dataType: 'xml'
}).done(function(data){
throbber.hide();
createTracks(data);
}).fail(function(){
console.log("Error");
});
}

Ge järnet!

[Linuus]

Ursprungligen postat av corneliisandberg

Hej Linus!
Kanske är fel svar och löser måhända inte ditt problem men du kan göra ajax anropet synkront istället om du vill. Prova om det kan funka för dig med async:false parametern.



Ge järnet!

Hej

Jo, jag vet. Ville helst inte göra det dock

Det slutade med att jag flyttade ajax-anropet för själva texten till Track-objektet. Så när man försöker hämta den från ett objekt (track.getLyrics() typ) och den inte finns så hämtar den texten via ajax, synkront, sparar och returnerar. Då slipper jag göra en massa onödiga requests dessutom. Får vara så tillsvidare.


Dock är jag fortfarande intresserad av hur man kan göra! T.ex. om man kan använda events, promises eller dylikt.