JQuery Mobile + интервал: не может остановиться в фоновом режиме
Я использую jQuery для мобильных устройств, и я просто хочу иметь счетчик, показывающий время, проведенное на странице. Проблема в том, что я не могу остановить увеличение счетчика в фоновом режиме, когда пользователь не видит страницу. Вот мой код:
Страница 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>
Страница 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>
Спасибо за вашу помощь!
2 ответа
Вам нужно будет изменить свой код, события на странице 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, была в том, что связывание было использовано вместо on. Кроме того, mobileinit должен быть объявлен до загрузки jQuery Mobile.
Вы можете увеличить, когда окно имеет фокус:
var window_focus;
$(window).focus(function() {
window_focus = true;
})
while (window_focus) {
checkEverySecond()
}