jQueryMobile＆amp;计时器 - 在ajax页面加载，变量范围上停止前一个计时器

Question

我使用jQuery Mobile，骨干网和常规的ole javascript计时器遇到了snafoo。 Web应用程序有一个空闲计时器，在两个连续页面上运行。问题是我正在处理事件的方式（在页面显示中包装所有内容），我的测试显示除了在后续的pageshow事件中实例化的第二个计时器之外，第一页的计时器继续运行 - 导致闪烁会话倒计时（同时显示倒计时变量的两个实例）。

我尝试检查idleInterval是否已经存在无效（结果总是不存在）。

我想我可以听一个其他'pagechange'事件 - 比如一开始就触发并停止前一个计时器 - 然而我必须在不同的'pagechange'事件中包含不同的代码部分因此存在范围问题（在任何一种情况下都需要参考相同的骨干模型）。多么糟糕......

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function (event) {
    if($(this).attr("id")!="KioskDefaultLogin" && $(this).hasClass('kiosk-mode') && event.type=='pageshow') {

       ...backbone js code...

       function sessionTimeout() {

        var inactivetime = 0;
        console.log('TIMER EXISTS?=>'+window.hasOwnProperty('idleInterval'));

        if( qnumerItem.get("state") != "login") {

            var idleInterval = setInterval(function(){

                if(qnumerItem.get("state") != "timeout") {

                    inactivetime ++;
                    console.log('TIMER -----'+inactivetime+'------');
                }

                ////console.log("timer 1: "+inactivetime);
                /*Edit the inactivetime value here to change the idle session timer*/
                if (inactivetime == 15 && qnumerItem.get("state") != "timeout") {

                    qnumerItem.changeState("timeout");
                    inactivetime=0;

                    /*End Session Due to Inactivity Countdown*/
                    $(function(){
                        var count=30;
                        console.log("I STARTED");
                        var countdown = setInterval(function(){

                            //$(".ui-page-active .session-countdown").html(count);
                            //$(".ui-page-active .to-phrase").show();
                            if (count == 0) {
                                clearInterval(countdown);
                                qnumerItem.changeState("kill");
                            }
                            count--;
                            console.log("timer 1: "+inactivetime);
                            console.log("timer 2: "+count);
                        }, 1000);

                        $(this).on( 'click', '.to-continue', function(event) {
                            event.preventDefault();
                            clearInterval(countdown);
                            $("#session-countdown").html(60);
                        });
                        $(this).on( 'click', '.to-end', function(event) {
                            event.preventDefault();
                            clearInterval(countdown);
                        });
                    });
                }
            }, 1000); // 1 second
        }

        //Zero the idle timer on mouse movement.
        document.addEventListener('touchstart', function(e) {
            e.preventDefault();
            inactivetime = 0;
        }, false);

        document.addEventListener('touchmove',
            function (e) {
                e.preventDefault();
            }, false);

        $(this).mousemove(function (e) {
            inactivetime = 0;
        });
        $(this).keypress(function (e) {
            inactivetime = 0;
        });
        $(this).click(function (e) {
            inactivetime = 0;
        });

    }

        sessionTimeout();

...more code....