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>

Edit2：这可能更漂亮一点：

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

希望这适合你。

使用jQuery和制表符以特定间隔将内容重新加载到div中

2 个答案: