运行几秒钟后，我的 AJAX 请求开始崩溃

Posted 2023-02-24

【中文标题】运行几秒钟后，我的 AJAX 请求开始崩溃

【英文标题】：My AJAX request starts freaking out after a few seconds of running

【发布时间】：2019-06-13 05:28:40

【问题描述】：

我正在尝试每 4 秒刷新一次页面上的两个元素。我当前的 ajax 设置如下所示：

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

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

我的 HTML 有一个 id 为 main 的 div，其中包含两个 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 每隔几秒钟刷新一次列表元素，以显示对我的用户模型的某个属性的任何更新。 ajax 请求在几秒钟后开始崩溃，并没有给我我期望的输出。

感谢您的帮助！

【问题讨论】：

听起来您的 setInterval 调用正在重新加载页面，这会再次触发 setInterval 并添加另一个处理程序，该处理程序也会重新加载页面...过了一会儿，您有很多 setInterval 处理程序都试图重新加载页面。

【参考方案1】：

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

【参考方案2】：

代码中的主要问题是 setInterval。 setInterval 听起来很简单，但这通常是一种邪恶。您的代码的问题在于，如果对服务器的请求是否完成，setInterval 会丢弃。它只是在 4 秒后叠加调用（可能不完全是 4）。您的 api 调用有时可能需要超过 4 秒才能完成，然后您就会陷入混乱。

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

setTimeout(update,4000)

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

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