带有ajax调用的Javascript setInterval使网站变慢

Question

我在 javascript 中实现了 setInterval() 函数，它每 2 分钟进行一次 AJAX 调用。 ajax 调用返回我在 html 中附加的数据。我不知道为什么，但它使网站变得非常缓慢，逐渐。该网站是用node js开发的。我搜索了这个问题并了解了clearInterval() 函数。但我无法正确使用它。有人可以给我一个正确清除间隔的通用示例吗？或者这是与 node 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');
    }        
}

这将设置一个间隔来执行您的 AJAX 操作 3 次，然后清除间隔并停止。这可能有助于提高性能，具体取决于您的需要。

Demo：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);
        }
    });

}