setInterval / setTimeout freezing browser?

[npm]

Hi,
Has anyone seen this before? I have a "Now Playing" section for a radio station that displays what song is currently on the air. The on-air computer uploads an xml file with the song title, artist and album name. Then I use a javascript function that loads/displays the xml file and I've been using setInterval or setTimeout to have it update itself.

Here's the xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<audio>
<title>Song Title</title>
<artist>Artist</artist>
<album_title>Album Title</album_title>
</audio>
 

Here's the javascript:

function nowPlaying() {
xmlDoc = loadXMLDoc("xml/playlist.xml");
title = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
artist = xmlDoc.getElementsByTagName("artist")[0].childNodes[0].nodeValue;
album_title = xmlDoc.getElementsByTagName("album_title")[0].childNodes[0].nodeValue;
document.getElementById("nowPlayingText").innerHTML = title + " by " + artist + "<br />From " + album_title;
setTimeout("nowPlaying()",5000);
}
 

The problem is that the page will "freeze" for a few seconds...I can't click on anything, can't scroll the page...nothing, and then it goes back to normal. Is this glitch just the browser freezing while it loads the xml file? I've noticed it in FF, IE, Safari, Chrome and Opera and whether I'm using either setInterval or setTimeout. Is there maybe a way for the javascript to wait and load the xml file only after it changes?

Thanks in advance!

[Dormilich]

Is there maybe a way for the javascript to wait and load the xml file only after it changes?

due to the stateless nature of HTML, a website doesn’t know, when a server file changes.

however, you can do an AJAX HEAD request (similar to GET) and read the "Last-Modified" header. if that value changed, you have a new file.