jquery mobile + interval : 백그라운드에서 실행 중지 할 수 없습니다.

jQuery 모바일을 사용하고 있으며 페이지에 머문 시간을 나타내는 카운터가 필요합니다. 문제는 사용자가 이 아닌이 페이지를 볼 때 백그라운드에서 증가하는 카운터 beeing을 멈출 수 없다는 것입니다. 당신의 도움이jquery mobile + interval : 백그라운드에서 실행 중지 할 수 없습니다.

<!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>

감사

페이지 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>

페이지 : 여기 내 코드입니다! 윈도우가있을 때

출처

2013-02-07 Réjôme

당신은 당신의 코드를 변경해야합니다

, JQM 페이지 이벤트는 조금 다른 노력하고 있습니다. 모든 페이지에 페이지 이벤트를 바인딩하고 있었고 문제가있었습니다. 한 페이지에 바인딩해야합니다.

여기에 동작하는 예제입니다 : 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); 
    });

내 예 1 HTML 다중 템플릿하지만 같은 일이 여러 HTML 파일과 같은 작동이.

는 편집 : 바인드가 대신의 을 사용하기 때문에이 멀티 HTML 예제에서 작동하지 않았다

이유였다. 또한 jQuery Mobile이로드되기 전에 mobileinit을 선언해야합니다.

출처

2013-02-07 10:29:50 Gajotres

내가 잘못 ('# page1'을 지정하지 않음)하는 곳을 이해하고 그것이 jsFiddle에서 작동하지만 여러 개의 html 파일 예제에서 작동하지 않는다는 것에 동의합니다! :( –

예를 보관하여 이메일 : [email protected]으로 보내시겠습니까? – Gajotres

수정이 전송되었습니다. 답안에 추가하겠습니다. – Gajotres

당신은 초점 증가 수 :

var window_focus; 

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

while (window_focus) { 
    checkEverySecond() 
}

JavaScript/jQuery: Test if window has focus

출처

2013-02-07 09:54:39

멋진 시도이지만 작동하지 않습니다. 첫째, 매 순간마다 실행되지는 않을 것 같습니다. 둘째, "jquery mobile philosophy"와 호환되지 않는 것 같습니다. –

jquery mobile + interval : 백그라운드에서 실행 중지 할 수 없습니다.

답변

관련 문제