简单的 AJAX 似乎悄悄地压倒了浏览器

Question

我有一个小的 AJAX，在一个递归函数中，还有一个在 complete 上的 setTimeout。由于我已经实现了这个，我有客户在页面上停留几个小时后抱怨延迟......

get_activity();

function get_activity() {
    var activity = $.ajax({
        type: "POST",
        url: "/ajax/activity.php",
        async: false
    }).complete(function () {
        setTimeout(function () {
            get_activity();
        }, 5000);
    }).responseText;

    $('#activity').html(activity);
}

因为它在回调中，.complete 并且它在 5 秒的 setTimeout 上，所以我认为运行它是安全的。响应只不过是一个正好有 1,000 行的表（基于mysql 调用中的LIMIT） 和 3 列。没什么大不了的：

<table style="font-size:9px; width:100%; font-weight:bold; color:#FFF;">
<?php foreach ($activity_log as $item): ?>
    <tr>
        <td style="width:60px;">
            <?= $item['user'] ?>
        </td>
        <td style="width:120px;">
            <?= $item['activity'] ?>
        </td>
        <td style="width:100px;">
            <?= date('M j, Y G:i', strtotime($item['date_completed'])); ?>
       </td>
    </tr>
<?php endforeach; ?>
</table>

如果你注意到我正在使用我的 AJAX

$('#activity').html(activity);

对

$('#activity').append(activity);

所以$('#activity')s DOM 元素每次都会被覆盖。所以我知道我不会那样加载浏览器。

我觉得我做的一切都是正确的 -- 没有加载请求，有效地使它们同步 -- 而且我没有加载 DOM，而是用每个请求清除和填充 div。

有没有人看到这个脚本及其响应会导致 Chrome 和 FF 在页面上几个小时后加载和滞后的原因？

Answer 1

当心像这样不断地轮询。这通常是不好的做法。 This article 提供了一些替代方案。

但是对于你的 ajax 调用：

当您使用async: false 时，您使ajax 调用同步，这意味着当网络操作发生时，没有其他JavaScript 可以运行并且在大多数浏览器中，页面完全没有响应。

删除 async: false 并改用 success 回调：

function get_activity() {
    $.ajax({
        type: "POST",
        url: "/ajax/activity.php",
        // *** Use the `success` callback
        success: function(text) {
            $('#activity').html(text);
        },
        complete: function() {
            setTimeout(function () {
                get_activity();
            }, 5000);
        }
    });
}