AJAX调用的多个setInterval()问题 - (冷却应用于库存中的项目)

时间:2014-03-07 07:43:15

标签: javascript jquery ajax setinterval

我无法正常使用以下代码。正确的行为应该是>在_loadInventory()上对所有.cooldown项目(倒计时)应用_loadCooldowns()。这样可以正常工作,但是当其中一个项目完成其冷却并刷新库存时会出现问题(_loadInventory())。似乎有一个间隔卡住,不断重新加载_loadInventory,打破了应用程序。我总是清除所有间隔,甚至清除间隔阵列。我希望下面的代码更有意义

// Loading the inventory
function _loadInventory(){
    // Fetching the inventory from PHP
    _ajaxFetch("php/ajax/conq-get-inventory.php", {ord : 0}).done(function(data){
        // Clearing inventory
        $('.inventory-field').each(function(){
            $(this).html('');
        })

        // Adding the data to html
        $.each(data.html, function(key, value){
            $('.inventory-field[data-inventory-field-id="' + key + '"]').html(value);
        })

        // HERE i am cleaning all the old intervals             
        $.each(intervals, function(key, value){
            clearInterval[intervals[key]];
        })

        // HERE i am clearing the intervals array           
        intervals = [];
        //buffs = [];

        // Teoretically now there should be no intervals, so run the function that assigns the cooldowns for each item in the inventory         
        _loadCooldowns();

        // Other not important code
        $('#pesos-wrapper').html(data.pesos);
        _startTooltip()
        $('#trash-wrapper').droppable({ 
            accept: ".item", 
            drop: function(event, e){
                _ajaxFetch("php/ajax/conq-delete-item.php", {id: e.draggable.attr('data-item-id')}, 1).done(_loadInventory);
                e.draggable.remove();
            }
        });
    })
}

以下是将冷却时间应用于所有具有.cooldown类

的项目的代码
function _loadCooldowns(){
    // If there are any cooldown 
    if($('.cooldown').length > 0){
        // Apply the cooldown for each item
        $('.cooldown').each(function(){
            // The cooldown element
            var e = $(this);
            // Just a check
            if($(this).attr('data-cooldown-type') == 'item'){
                // The id of the item (unique)
                var id = $(this).attr('data-item-id');
                // Start the interval and save it to the Intevals array
                intervals[id] = setInterval(function(){ _applyCooldown(e, id) }, 1000);
            }
        })
    }
}

这是Interval

中的实际功能
function _applyCooldown(e, id){
    // Get the current time in seconds
    var time = parseInt(e.attr('data-cooldown'));

    // If the time is more than 0
    if(time > 0){
        // Add new time             
        if(time > 60){
            time--;
            e.html(Math.round(time / 60) + 'm');
            e.attr('data-cooldown', time);
        }
        else{
            time--;
            e.html(time + 's');
            e.attr('data-cooldown', time);
        }
    }

    // Otherwise
    else{
        // Remove this cooldown element
        e.remove();
        // RELOAD INVENTORY! Here when the inventory is reloaded it should clear all the current intervals and start the full procedure again
        // But that does not happen, some intervals get stuck and persist
        // Resulting in anonymous intervals being run in the background that keep reloading the inventory all the time as their time is not > 0 (most likely undefined)
        _loadInventory();
    }
}
}

任何帮助都表示赞赏,因为我已经把头发拉了出来。谢谢!

A small image to see it in action for overview

1 个答案:

答案 0 :(得分:0)

固定!

我认为一个非常简单的修复可以帮助很多人。

我没有将间隔保存到数组中,而是执行了以下操作:

window.interval_id = window.setInterval(function(){ _applyCooldown(e, id) }, 1000);

现在,每次我想重置我刚刚做的间隔

function _resetIntervals(){

    for (var i = 1; i <= window.interval_id; i++){

         window.clearInterval(i);
         window.i = false;

    }

}

像魅力一样工作