Question

我正在尝试检查某些应用程序的状态。我有一个自调用函数，在.each方法中再次调用自身。但是，每次连续调用后，结果都会成倍增加。

这是我的HTML：

<table>
   <tbody id="applications">                    
        <tr>
            <td><b>Application 1</b></td>
            <td id="status" data-www="www.app1.com"><i class="fa fa-circle"></i></td>
        </tr>                       
        <tr>
            <td><b>Application 2</b></td>
            <td id="status" data-www="www.app2.com"><i class="fa fa-circle"></i></td>
        </tr>                       
   </tbody>
</table>

这是我的jQuery：

(function checkStatus(){

    var app_table = document.getElementById('applications');
    var app_rows = $(app_table).find('tr'); 

    console.log('Row length: ' + app_table.rows.length);

    $(app_rows).each(function(index){                       

       var app_status = $(this).find('#status')
       var app_www = app_status.attr('data-www')

       var data_obj = {
         www: app_www
       }

        $.ajax({
            url: 'api/application-status/',
            data: data_obj,
            type: 'GET',
            success: function(status){
               console.log('Status for ' + index + ' is ' + status);
               if(status){
                  app_status.find('i').css({color:'green'});                        
               } else {
                  app_status.find('i').css({color:'red'});
               }
             },
             complete: function(){                                                              
                setTimeout(checkStatus, 5000)
             }
            });                 
        })              
    })();

第一次运行时，我得到正确的输出：

Row length: 3
Status for index 0 is true
Status for index 1 is true
Status for index 2 is true

但是，第二次运行时，我得到了：

Row length: 3
Status for index 0 is true
Status for index 1 is true
Status for index 2 is true
Row length: 3
Status for 0 is true
Row length: 3
Status for index 1 is true
Status for index 2 is true
Status for index 0 is true
Status for index 1 is true
Status for index 2 is true
Status for index 0 is true
Status for index 1 is true
Status for index 2 is true

第三次更糟糕。有人可以解释发生了什么吗？是不是我的app_rows变量没有被清除？我用我的变量尝试了很多变化，但我无法解决这个问题。我是jQuery的新手。

先谢谢你的帮助。

Answer 1

您可能想要尝试的轻微替代方案。我没有测试过这个抱歉

function setStatus(item, color) {
    item.css({ color: color });
}

function poll(url) {
    var data_obj = {
        www: url
    };

    return $.ajax({
        url: 'api/application-status/',
        data: data_obj,
        type: 'GET'
    });
}

function checkStatus(index, item) {
    var app_status = $(item).find('#status');
    var app_www = app_status.attr('data-www');
    var status_item = app_status.find('i');

    poll(app_www)
        .then(function(status) {
            var statusColor = status ? 'green' : 'red';
            setStatus(status_item, statusColor);
            setTimeout(function() {
                checkStatus(index, item);
            }, 5000);
        })
        .catch(function(status) {
            setStatus(status_item, 'red');
            setTimeout(function() {
                checkStatus(index, item);
            }, 5000);
        });
}

$(app_rows).each(checkStatus);

Answer 2

问题是setStatus被称为每行，然后每行，再次调用setStatus。在某种程度上，代码是这样的：

function doSomethingForEachRow() {
    for (var i = 0; i < numRows; i++){                                                                         
        doSomethingForEachRow()
    }
}

因此，正在创建指数分支。

自调用命名函数将其结果复合到.each循环中

2 个答案: