Javascript setInterval與Ajax調用製作網站緩慢

Question

我已經在JavaScript中實現了setInterval()函數，它使得每2分鐘進行一次AJAX調用。 ajax調用返回我在html中追加的數據。我不知道爲什麼，但它會逐漸使網站變得非常緩慢。該網站是在節點js中開發的。我搜索了這個問題並瞭解了clearInterval()函數。但我無法正確使用它。有人能給我一個正確清除間隔的通用示例嗎？或者這是否與節點js有關的其他問題？

代碼下面：

setInterval(function() {  
appendData(skipCount);}, 120000); 

function appendData(_popularSkipCount) { 
    var cookieValue = $.cookie('type');   
    var _data = { 
     "limit": defaultLimit - 1, 
     "skipCount": _popularSkipCount 
    }    
    $.ajax({ 
     type: "GET", 
     url: "/popular/" + cookieValue, 
     data: _data, 
     async: true, 
     success: function (data) { 
      $("#data-box").empty(); 
      if($(data).size() > 0) { 
       for(var i = 0; i < $(data).size() ; i++) { 
        var html = "<div class='large-12 columns popular'><img class='image' src='" + $(data)[i].url + "' class='popular-img'><a href='/abc/" + $(data)[i].slug + "'><h4>" + name + "</h4></a><h5>" + city + "</h5></div>"; 
        $(html).hide().appendTo("#data-box").fadeIn(1000); 
       } 
      } else { 
       appendData("0"); 
      }    
     }, 
     error: function(jqXHR, textStatus, errorthrown) {        
      $("#data-box").empty(); 
      console.log(errorthrown); 
     } 
    });  
}; 

Answer 1

的clearInterval()方法清除一個定時器與setInterval（）方法設定。

下面是一個示例代碼

var myVar = setInterval(function(){ setColor() }, 300); 

function setColor() { 
    var x = document.body; 
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow"; 
} 

function stopColor() { 
    clearInterval(myVar); 
} 

Answer 2

如果你只需要調用的時候你的AJAX「X」量，你可以做這樣的事情：

var intervalCount = 0; 

var myAjax = setInterval(function(){ 
    myAjaxCall(); 
}, 2000); 

function myAjaxCall() { 
    // Some AJAX call here. 
    window.console.log('AJAX Call: ' + intervalCount); 
    intervalCount++; 
    if(intervalCount >= 3) { 
     clearInterval(myAjax); 
     window.console.log('AJAX Calls Stopped'); 
    }   
} 

這將設置的時間間隔做3次你的AJAX的東西，然後清除間隔和停止。這可能有助於提升性能，具體取決於您的需求。

演示：http://jsfiddle.net/89mwevda/（打開控制檯查看日誌）。

然後，在性能方面，從您的問題/情況來看，確實是導致您的問題並不是很清楚。如果你可以提供你的問題的一些演示代碼，它會幫助你得到更好的答案。

更新基於你在事後給了代碼：

我會避免在一個循環操縱DOM（附加的東西），而是，在這一塊做去，後建設字符串在你有變量。像下面的東西應該更好地工作（雖然未經測試）：

setInterval(function() {  
    appendData(skipCount); 
}, 120000); 

function appendData(_popularSkipCount) { 
    var cookieValue = $.cookie('type');   
    var _data = { 
     "limit": defaultLimit - 1, 
     "skipCount": _popularSkipCount 
    }; 

    $.ajax({ 
     type: "GET", 
     url: "/popular/" + cookieValue, 
     data: _data, 
     async: true, 
     success: function (data) { 
      $("#data-box").empty(); 
      if($(data).size() > 0) { 

       var html = ""; 

       for(var i = 0; i < $(data).size() ; i++) { 
        html += "<div class='large-12 columns popular'><img class='image' src='" + $(data)[i].url + "' class='popular-img'><a href='/abc/" + $(data)[i].slug + "'><h4>" + name + "</h4></a><h5>" + city + "</h5></div>"; 
       } 

       $(html).hide().appendTo("#data-box").fadeIn(1000); 

      } else { 
       appendData("0"); 
      }    
     }, 
     error: function(jqXHR, textStatus, errorthrown) {        
      $("#data-box").empty(); 
      console.log(errorthrown); 
     } 
    }); 

}