使用 jQuery 和选项卡以一定的时间间隔将内容重新加载到 div 中

Question

我有几个选项卡，单击这些选项卡时，会使用 jquery 将数据加载到 div 中。我需要以 5 秒的间隔重新加载数据，但只需要来自特定选项卡的信息。所以，这就是我所拥有的...我想我需要在单击一个选项卡时启动 setInterval，然后在单击另一个选项卡时停止它。这是我的选项卡代码：

<script type="text/javascript">    
$(document).ready(function(){
  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     $("#actionlist").load("alcurrent.php");
     });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     $("#actionlist").load("alpending.php");
     });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     $("#actionlist").load("alpast.php");
     });
});
</script>

例如，当单击 #xicon1 时，我需要它将 alcurrent.php 加载到 #actionlist （我可以做到这一点），但我需要它每 5 秒重新加载一次。然后，当我单击另一个选项卡时，我需要该选项卡每 5 秒开始加载一次。因此，无论哪个选项卡处于活动状态，我都需要每 5 秒加载一次内容。

我尝试过 setInterval...但没有骰子。

谢谢。

编辑：

这就是我所做的，我认为它有效...

<script type="text/javascript">
$(document).ready(function(){
  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon1() {
     $("#actionlist").load("alcurrent.php");
     }
     setInterval(xicon1, 5000);
     });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon2() {
     $("#actionlist").html("<p>2</p>")
     }
     setInterval(xicon2, 5000);
     });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon3() {
     $("#actionlist").html("<p>3</p>")
     }
     setInterval(xicon3, 5000);
     });
});
</script>

编辑2：这可能会更漂亮一些：

<script type="text/javascript">
$(document).ready(function(){
  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon1() {
     $("#actionlist").load("alcurrent.php");
     };
     $(function() {
     setInterval(xicon1, 5000);
     };
  });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon2() {
     $("#actionlist").html("<p>2</p>")
     };
     setInterval(xicon2, 5000);
  });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");
     function xicon3() {
     $("#actionlist").html("<p>3</p>")
     };
     setInterval(xicon3, 5000);
  });
});
</script>

好吧，我只是想确定：当有人单击不同的选项卡时，它会停止另一个选项卡的内容每 5 秒刷新一次？

Answer 1

你的setInterval的语法是什么，你试过这样吗？

setInterval(function() {
      // Do something every 5 seconds
}, 5000);

Answer 2

我认为您只需要在单击新选项卡时清除间隔并重置它，如下所示：

<script type="text/javascript">
$(document).ready(function(){
  var the_interval = 0;

  $("#xicon1").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");

     if (the_interval) {
        clearInterval(the_interval);
     }
     xicon1();  // I would call it here, to load newest data as soon as tab is clicked

     function xicon1() {
     $("#actionlist").load("alcurrent.php");
     };
     $(function() {
     the_interval = setInterval(xicon1, 5000);
     };
  });
  $("#xicon2").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");

     if (the_interval) {
        clearInterval(the_interval);
     }
     xicon2();  // I would call it here, to load newest data as soon as tab is clicked

     function xicon2() {
     $("#actionlist").html("<p>2</p>")
     };
     setInterval(xicon2, 5000);
  });
  $("#xicon3").click(function(){
     $('a[name^="xicon"]').removeClass();
     $(this).addClass("active");

     if (the_interval) {
        clearInterval(the_interval);
     }
     xicon3();  // I would call it here, to load newest data as soon as tab is clicked

     function xicon3() {
     $("#actionlist").html("<p>3</p>")
     };
     setInterval(xicon3, 5000);
  });
});
</script>

希望这对您有用。