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

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> 

希望這對你的作品。