循环遍历链接数组并在设定的时间间隔后动态加载每个链接的内容答案

【问题标题】：Loop through an Array of links and dynamically load the contents of each after a set interval循环遍历链接数组并在设定的时间间隔后动态加载每个链接的内容
【发布时间】：2010-01-12 02:40:20
【问题描述】：

使用 jQuery 我想循环访问一组链接，并在设定的时间间隔后将每个链接的内容加载到 DIV 中。例如，如果我有我的父页面“parent.html”和一组链接 - “test1.html、test2.html 和 test3.html”，我想最初将 test1.html 加载到 parent.html 中的 div 中，然后然后在设定的时间间隔后用 test2.html 替换 test1.html，然后 test3.html 无限期地重复这个过程。

如果有人可以帮助我，我将不胜感激。我曾尝试使用 .get() 和 setTimeout() 但只是没有专业知识和经验将这一切放在一起。非常欢迎任何帮助。

谢谢。

【问题讨论】：

标签： jquery ajax arrays loops get

【解决方案1】：

这会做你想做的。

You can view a working demo here. 每个链接只加载一次，然后缓存结果。后续迭代只是从缓存中拉取。

$(function(){
   var curIdx = 0,
       urls   = $.map($("#links a"),function(el){ return $(el).attr('href') }),
       cache  = {};

   function nextPage(){
       var url  = urls[curIdx],
           data = cache[url];

       curIdx += 1; if(curIdx == urls.length) curIdx = 0;

       if(!data){
         $("#content").load(url, function(data){
           cache[url] = data;
           nextTimer();
         })
       } else {
         $("#content").html(data);
         nextTimer();
       }
   };

   function nextTimer(){
     window.setTimeout(function(){ nextPage() }, 3000); // 3 Seconds
   }

   nextPage();
});

HTML

<ul id="links">
  <li><a href="test1.html">Test 1</a></li>
  <li><a href="test2.html">Test 2</a></li>
  <li><a href="test3.html">Test 3</a></li>
</ul>
<div id="content">

</div>

【讨论】：

我正在努力让它发挥作用。是否可以在 JSfiddle 中做到这一点？

【解决方案2】：

这将每 2 秒（2000 毫秒）切换一次。在线测试http://jsbin.com/owoxo

<div id="link"><a href="#">#</a></div>

var l = ["index.html","pictures.html","contact.html"], c = 0;
setInterval(function(){
  $("#link a").attr("href",l[c]).html(l[c]);
  if (c++ > l.length) c = 0;
}, 2000);

【讨论】：

【解决方案3】：

DOM 操作很昂贵。如果可以避免，尽量不要这样做。

您正在加载的链接是静态的还是动态的？意思是一旦加载，您需要再次加载它们吗？如果答案是否定的，请执行以下操作：

<div id="carousel"></div>

使用 CSS：

#carousel div { display: none; }

和：

var pages = ["text1.html", "text2.html", "text3.html"];

$(function() {
  for (int i=0; i<pages.length; i++) {
    $("<div></div>").appendTo("#carousel").load(pages[i]);
  }
  setInterval(rotate_pages, 5000);
});

function rotate_pages() {
  var carousel = $("#carousel");
  var pages = $(carousel).children();
  var visible = pages.filter(":visible");
  if (visible.length == 0) {
    pages.get(0).fadeIn();
  } else {
    var index = pages.index(visible);
    index++;
    if (index >= pages.length) [
      index = 0;
    }
    visible.fadeOut(function() {
      pages.get(0).fadeIn();
    });
  }
}

这样您只需加载一次页面，然后根据需要隐藏/显示 div 以在它们之间旋转。

【讨论】：

【解决方案4】：

我假设要求是加载链接页面的内容，而不仅仅是链接href？这是基于乔纳森的。

  <div id="content"></div>
  <script type="text/javascript">
    $(function(){
      var links = ["index.html","pictures.html","contact.html"];
      var curr  = 0;
      setInterval(function(){
        if (curr++ > links.length) curr = 0;
        $("#content").load(links[curr]);
      }, 2000);
    });
  </script>

【讨论】：