Javascript-functie werkt 8 keer correct, dan om de andere tijd

Ik heb een javascript-functie die ik aan mijn document probeer toe te voegen, zodat ik het gevoel heb dat het in realtime wordt bijgewerkt. Het is een AJAX-aanroep naar mijn MVC-controller die een JSON-resultaat retourneert en deze toevoegt aan de lijst bovenaan en verbergt vervolgens de laatste li en verwijdert vervolgens de laatste li.

Het probleem is, de functie werkt 8 keer foutloos en wordt dan fout. Na de eerste 8 keer verbergt de functie alleen het laatste item in de lijst, om de andere keer wordt er een toegevoegd aan de top. Dus na de eerste 8 runs groeit mijn lijst met 1 li elke andere run van het script:

Dit is mijn functie:

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

    Ik heb verschillende dingen geprobeerd om dit te laten werken. Mijn eerste gedachte was dat het interval sneller was dan dat het script het laatste lijstitem weggaf, maar ik heb dit getest met een interval van 5000 voor de get, en 1000 voor de hide/show van de elementen, die een extra 3000ms ten minste vóór de volgende oproep. Ik heb ook geprobeerd dit te veranderen:

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

    naar:

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

    nochtans krijg ik hetzelfde probleem na 8 keer. Het lijkt er echter op dat het, nadat het in dit ritme van alleen werken om de andere tijd komt, het onbeperkt houdt. Ik heb geprobeerd om er goed uit te zien, maar ik kan niets vinden dat deze symptomen zou verklaren ...

  • 3
    Iemand had voorgesteld om in plaats daarvan setTimeout te gebruiken met een recursieve optie van de functie die zichzelf na het voltooien oproept, met een vertraging. Ik heb dat wel geprobeerd, maar heb hetzelfde probleem. Ik heb de browsercache leeggemaakt en geverifieerd dat het script in de browser degene is die ik zojuist heb gewijzigd.
    toegevoegd de auteur tostringtheory, de bron

    1 antwoord

    U gebruikt de verkeerde schuine streep om de

  • te sluiten, wat betekent dat u eigenlijk 2
    • s per aanvraag toevoegt. (De tweede is leeg)

      verander deze regel:

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

      hieraan:

      firstLI.before('
    • ' + html + '
    • ');
      
  • 3
    toegevoegd
    UITSTEKEND! Domme fout, had het moeten vangen. Ik denk dat de reden dat ik dat niet deed is omdat het 8 keer eerder dan om het andere werkte. Ik kon de 8 keer correct begrijpen, omdat er oorspronkelijk 7 items in de lijst staan, dus toen het de 7e verwijderde, was het toen aan onjuiste li's. Kunt u echter uitleggen waarom het om de andere keer heeft gewerkt? Als het alleen 7 verwijderde, en dan bleef toevoegen, maar nooit verwijderde, had ik dat kunnen vangen. Ik vind dat echt vreemd en interessant!
    toegevoegd de auteur tostringtheory, de bron
    Ach, sorry, ik heb de 2 li's niet per verzoek gezien! Ik heb je antwoord echter correct gemarkeerd en heb het opgevolgd! Heel erg bedankt.
    toegevoegd de auteur tostringtheory, de bron