Question

I want to display some data which comes from my db using jQuery.ajax() (i.e. each one contains a title and a description) and I want this process to be done on a regular basis, say setInterval(func, 5000).

Now what I actually need is a js container (an array, a variable, whatever) in which I can store these items to and using another function, I want them to be displayed every 2 seconds.

So, in other words:

• We have to have two functions and a container, if you will. The ajax function is fired every 5 seconds and appends its data (if any) into the container (a queue).
• On the other hand, the second function displays the content of our container every 2 seconds and removes the displayed items from the container of course.

How can I implement this?

Answer 1

var queue = [];

function ajaxCall() {
  $.when($.ajax(...)).done(function(data) {
     ///assuming your data json's outermost structure is an array
     while(data[0]) {
        queue.push(data.shift());
     }
  })
}

function publisher() {
   var item = queue.shift();
   if(item) {
      //do your gubbins here
   }
}

setInterval(ajaxCall,5000);

setInterval(publisher, 2000);