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"); 
     } 
    }); 
    }); 
} 

聊天側板將成爲主要的面板，和李將是用戶，包括他們的狀態（在線/離線）和標誌（接收的消息）的目錄。至於標準，你可以提出什麼建議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

EDITS：另外，我建議你考慮不與DOM的每一次互動。它也很重要。