jQuery Mobile Et un compteur js exécuté deux fois

J'ai un site e-commerce avec un temps de panier maximum de 20 minutes. J'ai écrit un simple compteur de JS pour afficher timeleft comme ceci:jQuery Mobile Et un compteur js exécuté deux fois

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

Et dans le corps:

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

Il fonctionne très bien quand je navigue sur le site sans ajax. Mais quand j'essaie de naviguer dans ajax dans JQM, le compteur est ré-exécuter à chaque fois et accélérer, 2sec par 2sec, et si je reviens deux fois, il sera 3sec de 3 sec ..

Je peux « t trouver une solution ..

Source

2013-08-20 Christopher-BZC

Votre pageinit est faux, il doit être exécuté qu'une seule fois:

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

Sans cette vérification, chaque événement pageinit ajoutera un autre intervalle d'appel basketCounter.

Vous pouvez également vérifier l'existence des données au lieu de définir une variable.

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

Source

2013-08-20 14:51:00 TecHunter

Pourquoi la page init est-elle incorrecte? Y a-t-il un événement qui ne se déclenchera pas chaque fois que j'y retournerai et reviendrai sur ma vue mais seulement une fois? –

Je pense que je fais quelque chose de mal, et c'est l'erreur principale de ma page init, mon appel ajax duplique le contenu de ma page –

@ user2695901 'Déclenchée sur la page en cours d'initialisation, après l'initialisation. Nous vous recommandons de vous lier à cet événement au lieu de DOM ready() car cela fonctionnera, que la page soit chargée directement ou que le contenu soit tiré dans une autre page dans le cadre du système de navigation Ajax ». En bref, il se déclenchera toujours lors du chargement d'une page contenant cet événement. checkout votre chargement de la page, vous devriez seulement récupérer le contenu pas toute la page. mais encore, utilisez la vérification de la variable d'intervalle pour vous assurer que le nombre est unique. Vous devez utiliser une date pour vérifier au lieu d'un compteur – TecHunter

Vous pouvez essayer ce qui suit:

1) essayez de supprimer toutes les pages cachées

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

2) Unbind et lier l'événement page.

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

Source

2013-08-20 20:34:00 MartinOnTheNet

Cela ressemble à une solution sale pour moi .. est-ce correct? ? –

Hey salut, non ce n'est pas une solution sale. Normalement JQM conserve la première page chargée dans le DOM (caché), donc si vous revenez plus tard, vous pouvez voir la même page. Certaines applications ne veulent pas de ce comportement, il est donc courant d'appliquer cette logique. Je parle de 1). – MartinOnTheNet

Ok pour l'explication, j'ai déjà vu que JQM garde ma page précédente dans le dom. J'utiliserai la première solution postée depuis ses travaux mais je garderai à l'esprit la vôtre. Salutations –

jQuery Mobile Et un compteur js exécuté deux fois

Répondre

Questions connexes