Jquery mobile pageshow，pagehide倒计时重定向或退出将

Question

所以我正在尝试在 Jquery Mobile 中设置一个倒计时 30 秒的页面。 它必须具备以下能力：

(1) pageshow 开始倒计时 (2) 当倒计时结束时，重定向到新页面 (3) 如果用户在倒计时结束前点击离开（页面隐藏），则退出计时器功能并重置计数。

所以这是我的尝试。我已将代码放在<div data-role="page" id="pay"> 下。

<script>
            $("#pay").live("pageshow",function(){
            alert("show!");
            var sec = 10;
            var timer = setInterval(function() { 
               $('#seconds').text(sec--);
               if (sec == 5) { alert("5 seconds mark")};
               if (sec == -1) {
                  document.location = "cuentas";
                  clearInterval(timer);
               } 
            }, 1000);
            });

            $("#pay").live("pagehide",function(){
                alert("hide!");
                clearInterval(timer);
                var sec = 10;

            });

</script>

我得到了“表演！”警报。我收到“5 秒标记”警报。我得到了“隐藏！”当我在倒计时到期之前切换页面时发出警报。 但是如果我离开页面，比如说在 8 秒时，我的菜单栏会冻结 - 我无法再导航到其他页面 - 我会看到 5 秒警报！区间函数永远不会结束......我不确定出了什么问题。

另一个说明---

$("#pay").live("pagehide",function(){
               clearInterval(timer);
                var sec = 10;
                alert("hide!");

            });

当我这样做时，我从来没有看到警报.....

我试过return false;、return;、break;。任何想法如何杀死页面隐藏上的间隔倒计时功能？

Answer 1

来自 jQuery 文档：

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

除此之外，您的计时器变量似乎是 pageshow 上调用的函数的本地变量

$("#pay").live("pageshow",function(){
        var timer = setInterval(function() {

我认为您必须将其拉出才能将其从要在 pagehide 上调用的函数中传递给 clearInterval

另外，也许不相关，但你有一个分号是关闭的：

if (sec == 5) { alert("5 seconds mark")};

应该是

if (sec == 5) { alert("5 seconds mark");}