jQuery Mobile和一个执行了两次的js计数器

我有一个电子商务网站，最长购物篮时间为20分钟。我在JS中写了一个简单的计数器来显示剩余时间，如下所示：

 function basketCounter() {
    var minutes = Math.floor(count / 60);
    var sec = count - minutes * 60;
    if (sec < 10) {
        sec = '0' + sec;
    }
    console.log("hello");
    $(".temps_restant").html("reste: " + minutes + " : " + sec );
    $("#tunnel_panier_temps").html("" + minutes);
    if (count == 0) {
        window.location = '{{serverRequestUri}}flush_panier/1/';
    }
    count--;
}

体内：

var count = {{panierTmp.lifetime - now}};
$(document).bind('pageinit', function() {
    $("img.lazy").unveil();
    if (count > 0) {
        setInterval('basketCounter()', 1000);
    }
});

当我在没有ajax的情况下在网站上导航时，它工作得很好。但是，当我试图在JQM中导航ajax时，计数器每次都会重新执行并加速，2秒乘2秒，如果我返回两次，则会是3秒乘3秒。

我找不到任何解决办法。。

您的pageinit错误，应该只执行一次：

var count = {{panierTmp.lifetime - now}};
var interval=null;
$(document).bind('pageinit', function() {
    $("img.lazy").unveil();
    if (count > 0 && !interval) {
        interval=setInterval('basketCounter()', 1000);
    }
});

如果不进行此检查，每个pageinit事件都将添加另一个调用basketCounter的间隔。

您也可以检查数据是否存在，而不是设置变量。

if(!$(document).hasData('basketCounter')){
    $(document).data('basketCounter',{{panierTmp.lifetime - now}});
}

您可以尝试以下操作：

1）尝试删除任何隐藏的页面

<head>
    document.on('pagehide', function(e) {
       $(e.target).remove();
    });
</head>

2）取消绑定并绑定页面事件。

$(document).off('pageinit').on('pageinit', ....

相关内容

最新更新

热门标签：