Question

Hi I am making one site in RubyOnRails. I am having problem in showing some content at client side. What I want to do is like news where after every 10 sec., news would change. What I have done is I have make an ajax which fetch the news from my server, server returns array in json response. Now I have all the news array at client side I want to show one by one in 10 sec interval.
I have tried with this code but its not showing anything except last news.

function get_news(){
    $.ajax({
          url : "my.json",
          success:function(data){
              // data is array of json like [{"html" : "dfsf"},{"html":"ddd"}]
              news_change(data);
          }
    });
}

get_news();

function news_change(feed){
    $.each(feed,function(index,f){
        var feed_html = f.html;
        $('#news_div').fadeOut('slow', function(){
          $('#news_div').html(feed_html);
          $('#news_div').fadeIn('slow');
        });
        sleep(10000);
    });
}

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
          break;
        }
    }
}

when I execute this code it only shows news which is last. And also it hang my browser. Please suggest me why is this because ?

Answer 1

Use setTimeout or setInterval, which execute code asynchronously after a certain number of milliseconds. Looping is synchronous and locks the browser while it executes.

// this will execute get_news every 10,000 ms
var newsInterval = setInterval(get_news, 10000);

// if you ever want to stop the interval, use clearInterval
clearInterval(newsInterval);

Note that get_news performs an ajax call, which could take some time, meaning that your news will not update exactly every 10 seconds.

EDIT: to iterate through the news array every 10 seconds, you’d pass the news_change function to setInterval:

var newsInterval;

function get_news(){
    $.ajax({
        url : "my.json",
        success:function(data) {
            newsInterval = setInterval(function () {
                news_change(data);
            }, 10000);
        }
    });
}

get_news();

// if you ever want to stop the interval, use clearInterval
clearInterval(newsInterval);