为什么setTimeout（）在Firefox中的行为有所不同

Question

我的脚本循环遍历2014年世界杯的动态阵列组和团队，其中setTimeout用于延迟，因此一次显示一组。此外，每组中的一个团队使用延迟显示。它在chrome和safari中完美运行，但在Firefox中破解时就像它一样跳跃。此外，如果你觉得你可以使我的代码更优雅有它。我是新手。以下是您可以尝试的代码：

function showTeams() {
var teams = [
    ['Brazil', 'Croatia', 'Cameroon', 'Mexico'],
    ['Australia', 'Chile', 'Holland', 'Spain', ''],
    ['Colombia', 'Cote D\'Ivoire', 'Greece', 'Japan'],
    ['Costa Rica', 'England', 'Italy', 'Uruguay'],
    ['Ecuador', 'France', 'Honduras', 'Switzerland'],
    ['Argentina', 'Bosnia', 'Iran', 'Nigeria'],
    ['Germany', 'Ghana', 'Portugal', 'USA'],
    ['Algeria', 'Belgium', 'Korea', 'Russia']
];
//loop through each array and list teams 
var c = 0;

function groupLoop() {
    setTimeout(function () {
        count = c;
        var nation = teams[c];
        teamLoop(nation, count);
        if (c < 7) {
            groupLoop();
        };
        c++
    }, 2500);
}; //end groupLoop
function teamLoop(nation, count) {
    function riteAll() {
        var group = ['Group A', 'Group B', 'Group C', 'Group D', 'Group E',
            'Group F', 'Group   G', 'Group H'
        ];
        var squads = document.getElementById("squads");
        var li = document.createElement('li');
        var h2 = document.createElement('h2');
        h2.id = "listHead";
        var list = squads.appendChild(document.createElement('ul'));
        var mygroup = list.appendChild(h2);
        mygroup.appendChild(document.createTextNode(group[count]));
        j = 0;

        function listLoop() {
            setTimeout(function () {
                item = list.appendChild(li.cloneNode());
                item.appendChild(document.createTextNode(nation[j]));
                j++;
                if (j < 4) {
                    listLoop();
                };
            }, 300);
        } //end listLoop;
        listLoop();
    } //endRiteAll 
    riteAll();
}; /*END teamLoop, End timeout*/ ;
groupLoop();

};