當在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選擇更具體的（目前，他們將選擇每個僞頁）。