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"); 
    } 
    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> 

희망이 당신을 위해 작동합니다.