当在jquery mobile中离开页面时结束SetInterval函数

Question

我正在放置一个包含用于webcams的几个单独页面（* .htm）的jquery移动网站。在这些页面上，我加载了一个设置间隔功能，每隔几秒刷新一次摄像头的图像并模拟视频。

但是，当我使用导航链接或返回按钮返回到index.htm远离网络摄像头页面（webcam.htm）时，会出现问题，webcam.htm页面仍保留在DOM中并且每隔几个小时不断拉动图像秒。

如何在用户离开时清除页面或至少结束间隔？

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

Answer 1

您可以使用pageshow和pagehide事件来启动和停止的时间间隔：

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

您可以更改.ui-page选择更具体的（目前，他们将选择每个伪页）。