Question

I’m using the following javascript to refresh a div on a page every 30 seconds:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(document).ready(function(){
        $.ajaxSetup({cache: false});
    });
    getStatus();
});
function getStatus() {
    $('div#content').load('ajax_stream.php').fadeIn("slow");
    setTimeout("getStatus()",30000);  // refresh every 30000 milliseconds (30 seconds)
}
</script>

It occurs to me that there needs to be some form of limitation so that after ‘n’ minutes, we stop refreshing the div – ie if a user leaves their browser open forever, we don’t just keep consuming server resources.

How can I achieve this? Additionally, if I wanted to call a new file inside the DIV upon timeout, what is the best method?

Answer 1

How about this solution?

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    var statusUpdateTimeout = null;
    $(function(){
        $(document).ready(function(){
            $.ajaxSetup({cache: false});
        });

        // Run get status and repeat every 30 seconds
        getStatus();
        statusUpdateTimeout = setInterval("getStatus()", 30000);

        // Stop updating after 15 minutes
        setTimeout(function() {
            if(statusUpdateTimeout) clearInterval(statusUpdateTimeout);
        }, 900000);
    });

    function getStatus() {
        $('div#content').load('ajax_stream.php').fadeIn("slow");
    }
</script>

I replaced the setTimeout with a setInterval and moved it outside the getStatus function. Also I set a new timeout that will stop the interval after 15 minutes.

Also for future reference, please indent your code properly so that it’s readable to others.