php - 降低浏览器速度的 jQuery Loop

Question

我正在创建在线聊天，但我想知道在我的脚本中使用 jQuery .load() 时，我的浏览器似乎变慢了。当我检查检查元素“网络”部分时，它加载了一堆 GET 数据......等等。

我想知道是否有更好的脚本解决方案使用此代码来防止聊天在后台繁重，而数据在后台不断循环以检查谁一直在线/离线。

setInterval('loadThis()', 5000);

function loadThis () {
  $("#loads").load('includes/users.php', function(){
    $(".chat-side-panel li").each(function(i){
      i = i+1;
      $(this).addClass("stats"+i);
      var status = $(".stats"+i).find("span.bullet").data("status"),
          flag = $(".stats"+i).find("span.mail").data("flag");
      if(status == 1) {
        $(".stats"+i).find("span.bullet").addClass("online");
      }
      if(flag == 1) {
        $(".stats"+i).find("span.mail").addClass("active");
      }
    });
  });
}

聊天侧面板将是主面板，LI 将是用户列表，包括他们的状态(在线/离线)和标记(收到的消息)。至于标准，你对 setInterval 时间加载有什么建议(如果 5 秒就足够了)还是我应该增加它。

感谢您对此的投入。

附言。我们也在使用 PHP/MySQL 进行此操作。

Answer 1

我看到的一个问题是您不断地为相同的元素重新查询 DOM。获取它们一次，然后重复使用它们:

var load_target = $('#loads');
function loadThis () {
    load_target.load('includes/users.php', function () {
        load_target.find('.chat-side-panel li').each(function (i) {
            var stats_li = $(this),
                bullet = stats_li.find('span.bullet'),
                mail = stats_li.find('span.mail');

            bullet.toggleClass('online', (bullet.data('status') == 1))
            mail.toggleClass('active', (mail.data('flag') == 1));
        });
    });
}

我不知道您涉及的所有逻辑或您系统的其余部分是什么样的，因此此特定代码可能无法正常工作。它应该只是作为一个在真空中完成的重构，以展示如果您停止如此努力地访问 DOM，该函数会是什么样子。

另外，通常不推荐使用 setInterval。如果远程文件的加载需要一段时间，您可能会在上一个加载完成之前再次调用 loadThis()。如果对 loadThis() 的调用开始堆积，这会使您的 DOM 问题更加复杂。在这种情况下，最好递归使用 setTimeout。下面是修改为递归运行的上述代码，以及下面的一些使用示例:

var load_target = $('#loads'),
    loadThis = function (start_cycle) {
        $.ajax({
            url: 'includes/users.php',
            dataType: 'html',
            type: 'GET',
            success: function (response) {
                load_target
                    .html(response)
                    .find('.chat-side-panel li').each(function (i) {
                        var stats_li = $(this),
                            bullet = stats_li.find('span.bullet'),
                            mail = stats_li.find('span.mail');

                        bullet.toggleClass('online', (bullet.data('status') == 1))
                        mail.toggleClass('active', (mail.data('flag') == 1));
                    });
            },
            complete: function () {
                if (typeof start_cycle !== 'boolean' || start_cycle) {
                    load_target.data('cycle_timer', setTimeout(loadThis, 5000));
                }
            }
        });
    };

//to run once without cycling, call:
loadThis(false);


//to run and start cycling every 5 seconds
loadThis(true);
// OR, since start_cycle is assumed true
loadThis();


//to stop cycling, you would clear the stored timer
clearTimeout(load_target.data('cycle_timer'));