0

所以我试图在 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;任何想法如何杀死页面隐藏上的间隔倒计时功能？

4

1 回答 1

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");}
于 2012-12-12T18:36:21.583 回答