Question

我正在创建在线聊天，但在我的脚本中使用jQuery .load（）时，我想知道我的浏览器似乎变慢了。当我检查检查元素＆＃34; Net＆＃34;部分，它加载一串GET数据......等等。

我想知道是否有一个更好的脚本解决方案，使用此代码可防止聊天在后台繁重，同时数据在后台循环以检查谁继续在线/离线。< / p>

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秒就够了）或者我应该增加它。

感谢您的投入。

PS。我们也用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'));

Answer 2

去年（2012年左右）我为社交网络开发了一个聊天系统，并看到了

使用setInterval问题是在定期发送请求时，无需等待或携带队列中第一个请求的结果。有时脚本无法响应，Mozilla或IE会询问用户是否应该阻止或等待不响应的脚本。

我最终决定使用setTimeout代替。这是我做的（我使用$.getJSON所以请研究一下这个例子以及如何使用加载）

    function loadThis () {
       $.getJSON('url').done(function(results){
          //--use the results here
          //then send another request
          setTimeOut(function(){
               loadThis();
           },5000);
       }).fail(function(err){
          //console.log(print(err))
          setTimeOut(function(){
               loadThis();
           },1000);
       });
    }
    loadThis();

PS：我想提一下时间取决于我们在users.php文件中检索的很多项目。也许你应该使用分页提示。然后，您的users.php可以处理第一个请求的网址参数users.php?page=1&count=100，第二个请求的users.php?page=2&count=100，直到结果行数为0。

编辑：此外，我建议你不要每次都与DOM交互。这也很重要。

jQuery Loop会降低浏览器的速度

2 个答案: