Question

我试图每4秒刷新页面上的两个元素。我当前的ajax设置如下：

     setInterval(function () {
        update()
     }, 4000);

     function update() {
        $.get('/hello', function (data) {
            console.log("update")
            $('#main').html(data);
        });
     }

我的HTML的div的id为main，包含两个s集。

几秒钟的工作之后，我的列表开始复制疯狂的项目，并且页面开始滞后。我的控制台出现错误，提示“资源不足”。此外，我注意到应该在控制台中记录的“更新”并不是每4秒发生一次，而是使记录时间保持在0.5秒以内。

我尝试使用setTimeout，但是它不起作用。

我的车把代码如下：

<div id="main">

    <div id="recalled">
        <ul id="list">
            {{#each thing}}
            <li>
              this.something
            </li>
            {{/each}}
        </ul>
    </div>

    <div id="more">
        <ul>
            {{#each anotherThing}}
            <li>
               this.property
            </li>
            {{/each}}
        </ul>
    </div>
</div>

我的表达代码是在（异步地）搜索mongo数据库之后呈现整个页面。

await User.find( {some search parameter}, function(error, data) {
res.render("thePage", {thing: data[0], anotherThing: data[1})
})

最初呈现的数据很好。

我只想使用ajax每几秒钟刷新一次列表元素，以显示对User模型的某些属性的任何更新。几秒钟后，ajax请求开始出现异常，并且没有提供我期望的输出。

谢谢您的帮助！

Answer 1

看看这个post。在当前代码中，无论上一次调用的结果如何，您都严格每4秒调用一次update函数。由于ajax调用是异步的，因此您应该使用setTimeout来确保上一个调用已完成。

Answer 2

代码中的主要问题是setInterval。 setInterval听起来很简单，但这通常是邪恶的。您的代码的问题在于，如果对服务器的请求已完成，则setInterval会丢弃。它只是在4s之后堆叠呼叫（可能不是4s）。有时您的api调用可能需要4秒钟以上才能完成，然后您一团糟。

有很多方法可以解决此问题。一种简单的解决方案是使用

setTimeout(update,4000)

应该在您收到api调用的响应后使用。

function update() {
    $.get('/hello', function (data) {
        console.log("update")
        $('#main').html(data);
        setTimeout(update,4000)
    });
 }

运行几秒钟后，我的AJAX请求开始出现异常

2 个答案: