Javascript函数正常工作8次，然后每隔一次

Question

我有一个 javascript 函数，我正试图将它添加到我的文档中，让它有一种实时更新的感觉。这是对我的 MVC 控制器的 AJAX 调用，它返回 JSON 结果并将其添加到顶部的列表中，然后隐藏最后一个 li，然后删除最后一个 li。

问题是，这个函数完美地运行了 8 次，然后就搞砸了。在前 8 次之后，该函数只隐藏列表中的最后一项，每隔一次它会在顶部添加一个。所以在前 8 次运行之后，我的列表每隔一次运行脚本就会增长 1 li：

这是我的功能：

<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('<li>' + 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>

我已经尝试了几种方法来使其正常工作。我的第一个想法是间隔比脚本摆脱最后一个列表项要快，但我已经测试了这个间隔为 5000 的 get 和 1000 的元素的隐藏/显示，这应该提供一个至少在下一次通话之前额外 3000 毫秒。我也试过改变这个：

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

到：

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

但是 8 次后我遇到了同样的问题。似乎在它进入了这种每隔一段时间才工作的节奏之后，它就一直保持着它的不确定性。我试过四处寻找，但我似乎找不到任何可以解释这些症状的东西......

Answer 1

您使用了错误的斜杠来关闭<li>，这意味着您实际上是在为每个请求添加 2 个<li>s。 （第二个是空白的）

改变这一行：

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

到这里：

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