使用Sleep迭代Javascript中的数组

Question

嗨，我正在RubyOnRails中创建一个站点。 我在客户端显示一些内容时遇到问题。 我想做的就像是新闻，每隔10秒新闻就会发生变化。 我所做的是我做了一个ajax，可以从我的服务器获取新闻，服务器在json响应中返回数组。 现在，我在客户端拥有所有新闻数组，我想每10秒显示一次。 我已经尝试过使用此代码，但是除了最新消息，它什么也没有显示。

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;
        }
    }
}

当我执行此代码时，它只会显示最新消息。 而且它也挂在我的浏览器上。 请建议我为什么这是因为？

Answer 1

使用setTimeout或setInterval，它们在一定的毫秒数后异步执行代码。 循环是同步的，并在浏览器执行时锁定浏览器。

// 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);

请注意， get_news执行ajax调用，这可能需要一些时间，这意味着您的新闻不会每10秒钟精确更新一次。

编辑：要每隔10秒遍历新闻数组，您可以将news_change函数传递给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);