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

Question

我正在整理一个 jquery 移动网站，其中包括几个用于网络摄像头的单独页面 (*.htm)。在那些页面上，我正在加载一个设置间隔函数，该函数每隔几秒刷新一次从相机抓取的图像并模拟视频。

但是，当我使用导航链接或后退按钮从网络摄像头页面 (webcam.htm) 导航到 index.htm 时，会出现问题，webcam.htm 页面仍保留在 DOM 中，并且每隔几秒钟就会拉出图像.

当用户离开时如何清除页面或至少 endinterval？

<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 选择器更改为更具体（目前它们将选择每个伪页面）。