Question

I am trying to get a multiple countdown system, event day and minutes being fetched from database. There can be many such events. After getting the event date, i pass this values to a javascript function which on client side runs for every 1 sec using the setTimout function. This works fine for one event. However for many events how do i achieve the same functionality. i.e i want to run the javascript function for each event.

I am getting some php variables from database. eg

while($row = mysql_fetch_array($query)){
$a = $row['day'];
$b = $row['minutes'];

}

Now i need to pass all this values inside a javascript function.
If there were only one event, i could directly pass the php values. But for multiple events i am confused as to what to do. I tried using a javascript function inside the while loop, but i get function not defined error, and that is obvious because php is run before javascrip. Any logic, or help appreciated.

Thanks

Answer 1

In you PHP, first build your data array. It does not matter how you do it, but in the end, it may look something like :

$data = array(
   array('day' => 1, 'minutes' => '15'),
   array('day' => 0, 'minutes' => '45'),
   array('day' => 15, 'minutes' => 52'),
   // etc.
);

Then (still with PHP, create a Javascript function like :

var data = <?= json_encode($data) ?>;  // encode your PHP data into JSON notation
var interval = setInterval(function() {
   for (var i=0; i<data.length; i++) {
      // do something with your data
      // data[i].day   ... data[i].minutes ... etc.
   };
}, 1000);   // run every 1 sec

Note that the more data you have, the slower setInterval will execute. Just remember that Javascript is slow compared to other languages. Also, setInterval is preferable over setTimeout in your case to avoid stacking up your calls in the long run, therefore you should not rely on setTimeout nor setInterval for a 1 second interval, but you should have a variable to calculate the exact time span between each calls.

Something like;

var last_time = new Date().getTime();

then, inside your setInterval function, get how long the last function was called since last time (or for the first time, since page load)

var cur_time = new Date().getTime();
var timespan = (cur_time - last_time) / 1000; // millis > sec
last_time = cur_time; // update last_time
...