jquery mobile + interval : can't stop running in the background

StackOverflow https://stackoverflow.com/questions/14747935

Question

I am using jQuery mobile and I just want to have a counter indicating the time spent on the page. The problem is that I can't stop the counter beeing incremented in the background when the user is not seeing the page. Here is my code:

Page 1

<!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>
        $(document).bind("mobileinit", function(){
            $.mobile.hashListeningEnabled = false; 
        });

        var interval_id;

        function checkEverySecond() {
            $("#counter").html(parseInt($("#counter").html()) + 1);
        };

        $(document).bind("pageshow", function(){
            interval_id = setInterval(function() {checkEverySecond()}, 1000);
        });

        $(document).bind("pagehide", function(){
            clearInterval(interval_id);
        });
    </script>
</head> 
<body> 

<div data-role="page">

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

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

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

</body>
</html>

Page 2

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page 2</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>
</head> 
<body> 

<div data-role="page">

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

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

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

</body>
</html>

Thanks for your help!

Was it helpful?

Solution

You will need to change your code, jQm page events are working a little bit different. You were binding page events to the every page, and the was a problem. You need to bind them to a single page.

Here's a working example: http://jsfiddle.net/Gajotres/DU493/

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

My example is 1 html multipage template but same thing will work the same with multiple html files.

EDIT :

Reason it didn't work in your multi html example was because bind was used instead of on. Also mobileinit should be declared before jQuery Mobile is loaded.

OTHER TIPS

You could increment when the window has focus:

var window_focus;

$(window).focus(function() {
    window_focus = true;
})

while (window_focus) {
    checkEverySecond()
}

JavaScript / jQuery: Test if window has focus

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top