A kind person on here has helped me put together a script that:
1: Gets some data from my database
2: Display some information on the screen
3: Get the time a song began began, get the duration of the song in seconds and create a countdown timer to refresh the page
The data comes from MySql Database, its basically a history list that shows what song is currently playing and what has played before it (the metadata contained concists of artist, title, date_played, duration etc....
Now my question is:
How can i add a function to also run when it is time to refresh the playlist
for now i would like to just add a test function to alert("extra function added");
I would expect the screen to alert this message each time there is the PHP request for new data.
I have tried many attempts but im always creating functions and then calling them in the wrong area of the code so i wont bore you experts with the mess.
Thanks for reading... if you could shed some light it would really help me understand correct procedures.
Here is the script.
var PlayList = function (onUpdate, onError)
{
// store user callbacks
this.onUpdate = onUpdate;
this.onError = onError;
// setup internal event handlers
this.onSongEnd = onSongEnd.bind (this);
// allocate an Ajax handler
try
{
this.ajax = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
// fatal error: could not get an Ajax handler
this.onError ("could not allocated Ajax handler");
}
this.ajax.onreadystatechange = onAjaxUpdate.bind(this);
// launch initial request
//ADDED CODE
onSongEndWrapper();
//END ADDED CODE
this.onSongEnd ();
// ------------------------------------------
// interface
// ------------------------------------------
// try another refresh in the specified amount of seconds
this.retry = function (delay)
{
setTimeout (this.onSongEnd, delay*5000);
}
// ------------------------------------------
// ancillary functions
// ------------------------------------------
// called when it's time to refresh the playlist
function onSongEnd ()
{
this.ajax.open('GET', 'playlist.php',
true);
this.ajax.send(null);
}
//ADDED CODE
function onSongEndWrapper()
{
alert("extra function added");
this.onSongEnd();
}
//END ADDED CODE
// handle Ajax request progress
function onAjaxUpdate ()
{
if (this.ajax.readyState != 4) return;
if (this.ajax.status == 200)
{
// get our response
var list = eval ('('+this.ajax.responseText+')');
// compute milliseconds remaining till the end of the current song
var start = new Date(list.dbdata[0].date_played.replace(' ', 'T')).getTime();
var now = (list.servertime);
var d = start - now + 6500
+ parseInt(list.dbdata[0].duration);
if (d < 0)
{
// no new song started, retry in 3 seconds
d = 3000;
}
else
{
// notify caller
this.onUpdate (list);
}
// schedule next refresh
//ADDED CODE
setTimeout (onSongEndWrapper.bind(this), d);
//END ADDED CODE
}
else
{
// Ajax request failed. Most likely a fatal error
this.onError ("Request failed");
}
}
}
var list = new PlayList (playlistupdate, playlisterror);
function playlistupdate (list)
{
for (var i = 0 ; i != list.dbdata.length ; i++)
{
var song = list.dbdata[i];
}
{
$("#list0artist").html(list.dbdata[0].artist);
$("#list0title").html(list.dbdata[0].title);
}
}
function playlisterror (msg)
{
// display error message
console.log ("Ajax error: "+msg);
// may want to retry, but chances of success are slim
list.retry (10); // retry in 10 seconds
}
Create a wrapper function.
setTimeout (onSongEndWrapper.bind(this), d);
function onSongEndWrapper()
{
alert("extra function added");
this.onSongEnd();
}
To start on onload add
document.body.addEventListener("load", startPlayList, false);
function startPlayList()
{
list = new PlayList (playlistupdate, playlisterror);
}
And change this:
var list = eval ('('+this.ajax.responseText+')');
to:
var list = JSON.parse(this.ajax.responseText);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.