jQuery Mobile和一個js計數器執行兩次

我有一個電子商務網站，最多20分鐘的籃子時間。我在JS寫了一個簡單的計數器顯示像這樣的timeleft：jQuery Mobile和一個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秒。

我可以「找不到任何解決方案..

來源

2013-08-20 Christopher-BZC

你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}}); 
}

來源

2013-08-20 14:51:00 TecHunter

爲什麼我的頁面init錯了？是否有一個事件在我每次返回並返回時都不會被觸發，而只會返回一次？ –

我想我做錯了什麼，這是我的頁面init的主要錯誤，我的ajax調用正在複製我的頁面內容 –

@ user2695901'在初始化發生後，觸發頁面被初始化。我們建議綁定到這個事件而不是DOM ready（），因爲無論頁面是直接加載的還是內容被拉到另一個頁面作爲Ajax導航系統的一部分，這都可以工作。簡而言之，當加載包含此事件的頁面時，它總是會觸發。檢查你的頁面加載，你應該只檢索內容而不是整個頁面。但仍然使用區間變量檢查來確保計數是唯一的。你應該使用日期來檢查而不是計數器imo – TecHunter

你可以嘗試以下方法：

1）嘗試刪除拆散任何隱藏的頁面

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

2）和綁定頁面事件。

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

來源

2013-08-20 20:34:00 MartinOnTheNet

對我來說這看起來像一個骯髒的解決方案。？ –

嗨，嗨，不，這不是一個骯髒的解決方案。通常情況下，JQM保留加載在DOM中的第一頁（隱藏），所以如果稍後再回來，您可能會看到相同的頁面。有些應用程序不需要這種行爲，所以應用該邏輯很常見。我在說1）。 – MartinOnTheNet

好的解釋，我已經看到，JQM保持我的前一頁的dom。我將使用自其作品以來發布的第一個解決方案，但會記住您的作品。問候 –

jQuery Mobile和一個js計數器執行兩次

回答

相關問題