javascript - 如何使用 jQuery Mobile 让计时器在某些页面上运行？

Question

我有一个使用 jQuery Mobile 的小测验应用程序。我正在创建一个计时器，我想从 0 秒到 1 小时运行。不过，我希望计时器仅在用户查看某些页面时运行，即仅在用户提出问题时运行。因为回答完问题后，会出现一个有动画的页面，然后会转到另一个页面，就是解释。我在问题的标题部分显示了计时器。我有一个像这样的 HTML:

<div id="q1" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
                <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img src="images/timer.png"> <span id="timer"></span></h1>
                </div>
          <!--Here comes some other code related to the quiz question-->
</div>

我有 30 个问题，每个人的 ID 都以“q”开头，后跟一个数字，例如示例 q1。在每个人的标题中，我都有一个名为“timer”的跨度元素，我希望在其中显示数字。

        var timestamp;
        var interval = 1;
        var initTimer = true;
        var timerEl = $('span#timer');
        var qNumber;
        var qCorrect;
        var qFalse;

        function relocateTimer(newEl) {
            timerEl.prependTo(newEl);
        }

        function pad(n) { return ("0" + n).slice(-2); }

        Number.prototype.pad = function (len) {
            return (new Array(len+1).join("0") + this).slice(-len);
        }

        $(document).on("pagechange", function(event, ui) {
            if (($.mobile.activePage[0].id != "correctGIF") && ($.mobile.activePage[0].id != "wrongGIF")) {
                page = $.mobile.activePage[0].id;

                if (page.match(/\d+$/) != null) {
                    qNumber = page.match(/\d+$/)[0];
                    qCorrect = q.concat(qNumber, 'Correct');
                    qFalse = q.concat(qNumber, 'False');
                }

                if (page !== qCorrect || page !== qFalse) {
                     if (page == "q1") {
                         timestamp = new Date(0, 0, 0, 0, 0, 0);
                         if (initTimer) {
                            setInterval(function() {
                                timestamp = new Date(timestamp.getTime() + interval * 1000);
                            document.getElementById('timer').innerHTML = timestamp.getMinutes().pad(2) + ':' + timestamp.getSeconds().pad(2);
                            }, Math.abs(interval) * 1000);

                            initTimer = false;
                         }
                     }
                }
          }

我有一个类似上面的代码。我希望在用户处于问题 1 (q1) 时重置计时器。当他/她在做其他题的时候，从q2到q30，我要显示定时器，从上次剩下的时间开始继续。因此，该功能应该包含在 if (page !== qCorrect || page !== qFalse) 中，但我不知道如何实现它。任何人，有什么想法吗？

编辑 1:

正如我所说，我有 30 个问题，它们的 ID 在 q1 到 q30 之间。我希望在 q1 中重置计时器，或者如果 1 小时过去了，它应该显示一个警报并移动到主页，它有一个 id home。因此，仅当当前事件页面在 q1 到 q30 之间时，我的代码才会进入 if (page !== qCorrect || page !== qFalse)。这就是我检查当前页面是否为 q1 的原因，如果是，我会激活计时器。所以，我从答案中了解到，我需要在那里做这样的事情:

if (page !== qCorrect || page !== qFalse) {
    var curpage = '#'.concat(page);
    timestamp = new Date(0, 0, 0, 0, 0, 0);

    $(curpage).on("pagebeforeshow", function(event) 
    { 
         var element = $(this).find("span#timer");
         if (initTimer) {
                setInterval(function() {
                timestamp = new Date(timestamp.getTime() + interval * 1000);
            document.getElementById(element).innerHTML = timestamp.getMinutes().pad(2) + ':' + timestamp.getSeconds().pad(2);
                }, Math.abs(interval) * 1000);

                initTimer = false;
         }
    }
}

虽然，不知道这是否正确，也不知道如何在 pagehide 事件上停止计时器。});

编辑 2:

在你的好榜样之后，我为自己尝试了一些东西。我有下面的代码，但它似乎不起作用。我的意思是它不会停止计时器。在每个问题之后，我都会显示正确答案或错误答案(#correctGIF 和#wrongGIF 页面)，然后显示答案。关键是在那些页面中，计时器没有显示，这是必须的。但是当我做下一道题的时候，不是从之前留下的时间继续，而是从之前留下的时间再加上3-4秒继续。请注意，我的动画 (GIF) 每 3 秒一次。也许计时器在它们显示期间处于事件状态。

var timestamp = new Date(0, 0, 0, 0, 0, 0);
var interval = 1;
var initTimer = true;
var timer = null;

function pad(n) { return ("0" + n).slice(-2); }

Number.prototype.pad = function (len) {
    return (new Array(len+1).join("0") + this).slice(-len);
}

function startTimer() {
    var currentPage = $.mobile.activePage[0].id;
    if (timer == null) {
        var $timer = $("#"+currentPage +" span#timer");
        timer = setInterval(function() { showTimer() }, 1000);
    }
}

function stopTimer() {
    if (timer !== null) {
        clearInterval(timer);
        timer = null;
    }
}

function showTimer() {
    timestamp = new Date(timestamp.getTime() + interval * 1000);
    var currentPage = $.mobile.activePage[0].id;
    var $timer = $("#"+currentPage +" span#imter");
    $timer.html(timestamp.getMinutes().pad(2) + ':' + timestamp.getSeconds().pad(2));
    return false;
}


$(document).on("pagechange", function(event, ui) {

    $("[id^=q]").on('pagebeforeshow', function() {
        var currentPage = $.mobile.activePage[0].id;
        console.log("Current page is: " + currentPage);

        var correctIndex = currentPage.indexOf('Correct');
        var falseIndex = currentPage.indexOf('False');

        if (correctIndex > -1  || falseIndex > -1) {
            stopTimer();
        } else {
            startTimer();
        }
    });

    // I have some more code down here, checking which page is currently active and
    // acting accordingly. This part is crucial for my app.

});

已解决:

似乎计时器在动画期间正在运行，添加了 stopTimer()； #correctGIF 和#wrongGIF 使它起作用。谢谢!

Answer 1

我认为您应该在更改页面时查看来自 jQuery Mobile 的事件:

http://api.jquerymobile.com/category/events/特别是“pagebeforeshow”(pagebeforeshow)。

在您的情况下，“选择器”将是问题中 div 的类或 ID:

$(".selector").on("pagebeforeshow", function(event) 
{ 
     var element = $(this).find("span#timer");
     //start element animation here, start the timer
});

此外，您还应该在此函数中终止计时器:

$(".selector").on("pagehide", function( event ) { ... });

附言问题修改后或评论后会更新答案。

Jsfiddle.net 示例在这里:http://jsfiddle.net/floradu88/sW8kv/1/

使用代码编辑，只需将其添加到 aaa.html 中并在浏览器中运行:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>
    <a href="#" data-role="button" data-icon="star" onclick="showPage1();">Star button</a>      
    </div><!-- /content -->

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

<div id="q1" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
                <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img data-icon="arrow-l"> <span id="timer">Timer not started</span></h1>
                </div>
          <!--Here comes some other code related to the quiz question-->
          Question 1 - text
          <a href="#" data-role="button" data-icon="star" onclick="showNextPage()">Next</a>
          <a href="#" data-role="button" data-icon="star" onclick="showAnswerPage()">Show answer</a>
</div>

<div id="q1Answer" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">


                <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img data-icon="arrow-l"> <span id="timer">Timer not started</span></h1>
                </div>
          <!--Here comes some other code related to the quiz question-->
          Question 1 answer 
          <a href="#" data-role="button" data-icon="star" onclick="showNextPage()">Next</a>
</div>

<div id="q2" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
                <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img data-icon="arrow-l"> <span id="timer">Timer not started</span></h1>
                </div>
          <!--Here comes some other code related to the quiz question-->
          Question 2 - text
          <a href="#" data-role="button" data-icon="star" onclick="showNextPage()">Next</a>
          <a href="#" data-role="button" data-icon="star" onclick="showAnswerPage()">Show answer</a>
</div>

<div id="q2Answer" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
    <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img data-icon="arrow-l"> <span id="timer">Timer not started</span></h1>
                </div>
                Question 2 answer 
          <!--Here comes some other code related to the quiz question-->
          <a href="#" data-role="button" data-icon="star" onclick="showNextPage()">Next</a>
</div>

<div id="q3" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
                <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img data-icon="arrow-l"> <span id="timer">Timer not started</span></h1>
                </div>
          <!--Here comes some other code related to the quiz question-->
          Question 3 - text
          <a href="#" data-role="button" data-icon="star" onclick="showNextPage()">Next</a>
          <a href="#" data-role="button" data-icon="star" onclick="showAnswerPage()">Show answer</a>
</div>

<div id="q3Answer" data-role="page" data-add-back-btn="true" data-back-btn-text="Home">
               <div data-role="header"  data-position="fixed"  data-tap-toggle="false">
                    <h1><img data-icon="arrow-l"> <span id="timer">Timer not started</span></h1>
                </div>
                Question 3 answer 
          <!--Here comes some other code related to the quiz question-->
          <a href="#" data-role="button" data-icon="star" onclick="showNextPage()">Next</a>
</div>

<script type="text/javascript">
 var timer = null;
 var actualValue = 0;
 var questionNo = 3;

 function showNextPage(){
    var currentPage = $.mobile.activePage[0].id;

    var part = currentPage.substr(1);
    var index = part.indexOf('Answer');
    if (index > -1) {
       part = part.substr(0,index);
    }
    var number = parseInt(part);

    if (number + 1 <= questionNo) {
        var nextPageId = "#q"+ (number + 1);

        $.mobile.changePage($(nextPageId));
    } else {
       //ended questionnaire
       alert("ended questionnaire");
    }
 }

 function showAnswerPage(){

    var currentPage = $.mobile.activePage[0].id;

    var part = currentPage.substr(1);
    var number = parseInt(part);
    var nextPageId = "#q"+ number + "Answer";

    var index = currentPage.indexOf('Answer');

    stopTimer();

    $.mobile.changePage($(nextPageId));
 }

 $("[id^=q]").on('pagebeforeshow', function(){
    var currentPage = $.mobile.activePage[0].id;

    var index = currentPage.indexOf('Answer');

    if (index > -1) {
        stopTimer();
    } else {
        startTimer();
    }
 });

 function startTimer(){
    var currentPage = $.mobile.activePage[0].id;
    if (timer == null) {
        var $timer = $("#"+currentPage +" span#timer");
        timer = setInterval(function(){ showClock() }, 1000);
    }
 }

 function stopTimer(){

    if (timer !== null) {
        clearInterval(timer);
        timer = null;
    }
 }

 function showPage1(){
    $.mobile.changePage($("#q1"));
    return false;
}

function showClock(){
   console.log(actualValue);
   actualValue = actualValue + 1;
   var currentPage = $.mobile.activePage[0].id;

   var $timer = $("#"+currentPage +" span#timer");
   $timer.html(actualValue +' s elapsed');
   return false;
}
</script>

</body>
</html>