Question

I am putting together a jquery mobile site that includes several separate pages (*.htm) for webcams. On those page, I am loading a set interval function that refreshes the image grab from the camera every few seconds and simulates video.

The problem occurs however when I navigate away from the webcam page (webcam.htm) using a nav link or back button back to index.htm, the webcam.htm page remains in the DOM and keeps pulling the images every few seconds.

How can I clear the page or at least endinterval when the user leaves?

<script type="text/javascript">
    function camfresh() {
        setInterval(function(){ $("#rmcam").attr("src", "image.jpg?"+new Date().getTime());},2000);
    }
</script>

Answer 1

You can use the pageshow and pagehide events to start and stop the interval:

var myInterval;
$(document).delegate('.ui-page', 'pageshow', function () {

    //note that `this` refers to the current `data-role="page"` element

    //cache `this` for later (inside the setInterval anonymous function)
    var $this = $(this);

    myInterval = setInterval(function(){
        $this.find("#rmcam").attr("src", "image.jpg?"+new Date().getTime());
    }, 2000);
}).delegate('.ui-page', 'pagehide', function () {
    clearInterval(myInterval);
});

You can change the .ui-page selectors to be more specific (currently they will select every pseudo-page).