jQM - Interval test

by Dragan Gaić

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page 1</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
    <script>
        
        var timerObject = {
            interval_id : null
        }
        
        function checkEverySecond() {
            $("#counter").html(parseInt($("#counter").html()) + 1);
        };        
        
        $(document).on('pagebeforeshow', '#page1', function(){   
                timerObject.interval_id = setInterval(function() {checkEverySecond()}, 1000);    
        }); 
        
        $(document).on('pagehide', '#page1', function(){   
                clearInterval(timerObject.interval_id);  
        });                
    </script>
</head> 
<body> 

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page 1</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p id="counter">0</p>
        <a href="#page2">Go to page 2</a>
    </div><!-- /content -->

</div><!-- /page -->
    
    <div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page 2</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <a href="#page1">Go to page 1</a>   
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>