La fonction Javascript fonctionne correctement 8 fois, puis une fois sur deux.

J'ai une fonction JavaScript que j'essaie d'ajouter à mon document pour lui donner le sentiment d'être mis à jour en temps réel. Il s'agit d'un appel AJAX à mon contrôleur MVC qui renvoie un résultat JSON et l'ajoute à la liste en haut, puis masque le dernier li, puis supprime le dernier li.

Le problème, c’est que la fonction fonctionne parfaitement 8 fois, puis qu’elle tourne mal. Après les 8 premières fois, la fonction ne masque que le dernier élément de la liste, une fois sur deux. Ainsi, après les 8 premières exécutions, ma liste s’allonge de 1 li toutes les autres exécutions du script:

Voici ma fonction:

<script type="text/javascript">
    $(document).ready(function() {
        function latestBranch() {
            $.getJSON("Home/LatestWristband", null, function (html) {
                var showHideSpeed = 200;
                var firstLI = $("#recentBranches ul li").first();
                if (firstLI.text() !== html) {
                    firstLI.before('
  • ' + html + '<\li>'); $("#recentBranches ul li").first().hide().show(showHideSpeed); $("#recentBranches ul li").last().hide(showHideSpeed/4, function() { $("#recentBranches ul li").last().remove(); }); } }); }; setInterval(latestBranch, 500); }); </script>

    J'ai essayé plusieurs choses pour que cela fonctionne. Ma première pensée a été que l'intervalle était plus rapide que le script ne supprimait le dernier élément de la liste, mais je l'ai testé avec un intervalle de 5000 pour le get et de 1000 pour le masquage/show des éléments, ce qui devrait fournir une 3000ms supplémentaires au moins avant le prochain appel. J'ai aussi essayé de changer ceci:

    $("#recentBranches ul li").last().hide(showHideSpeed/4,
                            function() {
                                $("#recentBranches ul li").last().remove();
                            });
    

    à:

    $("#recentBranches ul li").last().remove();
    

    Cependant, j'ai le même problème après 8 fois. Il semble cependant qu’après avoir commencé à travailler à ce rythme, il le garde indéfiniment. J'ai essayé de chercher autour de moi, mais je n'arrive pas à trouver quoi que ce soit qui expliquerait ces symptômes ...

  • 3
    Quelqu'un m'avait suggéré d'utiliser setTimeout avec une option récursive de la fonction qui s'appelle après avoir terminé, avec un délai. J'ai essayé cela, mais j'ai le même problème. J'ai effacé le cache du navigateur et vérifié que le script dans le navigateur est celui que je viens de modifier.
    ajouté l'auteur tostringtheory, source

    1 Réponses

    Vous utilisez la mauvaise barre oblique pour fermer le

  • , ce qui signifie que vous ajoutez en fait 2
    • s par demande. (Le second est vide)

      changer cette ligne:

      firstLI.before('
    • ' + html + '<\li>');

      pour ça:

      firstLI.before('
    • ' + html + '
    • ');
      
  • 3
    ajouté
    EXCELLENT! Erreur stupide, aurait dû l'attraper. Je suppose que la raison pour laquelle je ne l’ai pas fait est que cela a fonctionné 8 fois avant que tous les autres. Je pouvais comprendre que les 8 temps étaient corrects, car il y avait à l'origine 7 éléments dans la liste, ainsi quand il supprime le 7ème, il était alors trop mauvais. Cependant, pouvez-vous expliquer pourquoi cela a fonctionné une fois sur deux? Si cela ne supprimait que 7, puis que je continuais à ajouter, mais jamais à supprimer, j'aurais pu le comprendre. Je trouve cela vraiment étrange et intéressant!
    ajouté l'auteur tostringtheory, source
    Ah, désolé, je n'ai pas vu les 2 li par demande! J'ai marqué votre réponse correcte cependant, et l'ai améliorée! Merci beaucoup.
    ajouté l'auteur tostringtheory, source