javascript - 在 pageshow 上加载功能并在使用 jQuery Mobile 离开页面时停止

Question

我在运行检查表中新消息的功能时遇到问题。当我打开 message_page 时，我希望这个“setInterval”函数开始运行，但在离开页面后停止运行（我有一个包含多个页面的 html 文件）。有没有办法做到这一点？因为我的脚本即使在离开页面后也会继续运行。

$(document).on('pageshow', '#message_page', function(){
    $('#chat_box').scrollTop($('#chat_box').height());

    setInterval( function() {checkNewMessages(c_key,m_fid);},1000);
});

Answer 1

这是一个工作示例：http: //jsfiddle.net/Gajotres/QUCUt/

$(document).on('pagebeforeshow', '#index', function(){       
    timerHandler.timer1 = setInterval(function () {
        $('#test-input').val(parseInt($('#test-input').val()) + 1);
    }, 1000);
});

$(document).on('pagebeforehide', '#index', function(){       
    clearInterval(timerHandler.timer1);
});

var timerHandler = {
    timer1 : null
}

让我解释。如果您将计时器创建为对象变量，则可以随时访问它。在这种情况下， pagebeforeshow事件将启动计时器，而pagebeforehide将暂停它。您可以在我的示例上对其进行测试，让它运行一点，然后转到第二页，稍等片刻然后返回。您将看到计时器已暂停。