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

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

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

}

Javascript setInterval与ajax调用使网站变慢

2 个答案: