Question

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

（1）在页面显示开始倒计时（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（）。

除此之外，看起来你的timer变量是在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");}

Jquery移动页面显示，重定向或退出的页面隐藏倒计时将

1 个答案: