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がクリックされた場合例えば、私は（私はこれを行うことができます）#actionlistにalcurrent.phpロードするためにそれを必要とするが、私はそれはそれのすべてをリロードする必要があります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"); 
    }; 
    $(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> 

オーケー：

ここに私がやったと私はそれがうまくいくと思うものだ...

<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：これは少しきれいかもしれません誰かが別のタブをクリックしたときに、他のタブのコンテンツが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> 

が、これはあなたのために働く願っています。