时间戳

首页 > 解决方案 > 简单的 AJAX 似乎悄悄地压倒了浏览器

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

问题描述

我有一个小的 AJAX，在一个递归函数中，还有一个setTimeouton complete. 自从我实施了这个，我有客户在页面上坐了几个小时后抱怨滞后......

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并且在setTimeout5 秒内，我认为运行它是安全的。响应只不过是一个包含 1,000 行（基于调用）LIMITmysql和 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 在页面上几个小时后加载和滞后？

标签： javascriptjqueryajaxloops

解决方案

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

但是对于您的 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);
        }
    });
}

推荐阅读