0

I'm new to javascript so be gentle ;)

I wrote a script which (on a webpage) gets a song artist/title and find the albumart on last.fm ..

I use a return to exit (and restart) when the existing track name is the same as there is no need t go through the whole script when it is. I noticed however that often it appears that the script still seems to run through a number of these cycles before picking up on a new entry in the textfile it reads for the names of artist and title. Is there any way to prevent this or can I use a better way to exit or restart the function?

Not sure if I explained this correctly, but I hope you get it.. thanks

var jsnURL = "http://ws.audioscrobbler.com/2.0/?autocorrect=1&method=track.getinfo&api_key=[mykeyisprivate]&format=json&";
var playURL = "./data/nowplaying.txt";
var noImg = "./data/speaker.png";
var albumImage = noImg;
var oldtitle = "none";
var image;

var doMe = function(){
  $(document).ready(function(){

    $.get(playURL, function(sngPlaying){
/*      console.log(sngPlaying); */
      
      var artist = sngPlaying.split(" - ")[0];
      var title = sngPlaying.split(" - ")[1];

      if ((artist === "not running") || (title === oldtitle)) {
        return;
      };

      oldtitle = title;
/*
      console.log("Artist: "+artist);
      console.log("Title: "+title);
*/
      $.getJSON(jsnURL+"artist="+artist.replace("&","%26")+"&track="+title, function(data){

        try{
          albumImage = data.track.album.image[2]['#text'];
          if (albumImage) {
/*            console.log("Found Album Art: "+albumImage); */
          }
          else {
/*            console.log("Did not Find Album Art, using generic image");  */
            albumImage = noImg;
          };
        }
        catch(err) {
/*          console.log("Something went wrong, using generic image");  */
          albumImage = noImg;
        }


        $("#albumArt").html('<img class="albumArt" src='+albumImage+'>');
        $("#trackArtist").html('<span>'+artist+'</span>');
        $("#trackTitle").html('<span>'+title+'</span>'); 

      });

    });

  });
};

setInterval(doMe, 2000);
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700);

#nwPlayContainer {
  width: 450;
  height: 50;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
/*background-color: black;
*/font-family: 'PT Sans Caption';
}

#albumArt {
  width: 46px;
  height: 46px;
  padding-left: 2px;
  padding-top: 2px;
  border-radius: 50%;
}

.albumArt {
  border-radius: 50%;
  width:46px;
  height:46px;
  }

#trackArtist {
  width: 398px;
  height: 20px;
  position: absolute;
  text-align: left;
  top: 7px;
  left: 55px;
  color: white;
  font-size: 12px;
  text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
  }

#trackTitle {
  width: 398px;
  height: 20px;
  position: absolute;
  text-align: left;
  top: 25px;
  left: 55px;
  color: white;
  font-size: 12px;
  text-shadow:
   -1px -1px 0 #000,
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
  }
<div id=nwPlayContainer>
  <div id="albumArt"></div>
  <div id="trackArtist"></div>
  <div id="trackTitle"></div>
</div>
  • Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – blurfus Mar 31 '16 at 22:58
  • Not sure I understood the issue but it sounds like you are having issues with asynchronous calls (specifically: `$.getJSON`) so make sure you wait for the response before you update your DOM – blurfus Mar 31 '16 at 22:59
  • @ochi: I don't think so (there is nothing after the callback that tries to use the result), but I can't really tell what the issue is either. – Bergi Mar 31 '16 at 23:19

0 Answers0