Javascript 如何在回调setTimeout函数后增加计数器变量？

出于演示目的，我想创建一个多文件上传进度条动画。到目前为止，我创作了以下小提琴作品：

问题是，我想在之前的动画结束时启动下一个动画，但我不知道如何启动。我读过一些关于jQuery的queue方法的文章，但它似乎只是在延迟下工作，而不是回调。但稍后，当有真正的上传时，将有完成上传的回调。我想在百分比为100%时触发回调，然后将百分比重置为0，并启动I+1的超时函数

由于存在dropzone，文件的计数将有所不同。但是很容易计算它们：

var uploads=$（'.progress'）.size（）

每次尝试启动排队的动画循环都以并行动画或无休止的循环结束。因此，如果有人能给我一些提示、链接、代码片段或任何东西，那就太好了：）

代码：

HTML:

Javascript/jQuery：

var perc = 0;

$('#upload_submit').click(function () {
     $('.percentage').eq(0).append("0%");
     timeout();
});

function timeout() {
     setTimeout(function () {
         if (perc <= 95) {
             perc = perc + 5;
             $('progress').eq(0).val(perc);
             $('.percentage').eq(0).html(perc + "%");
         }
         timeout();
     }, 1000);
}

var perc=0；
$（“#上载_提交”）。单击（函数（）{
$（'.percentage'）.eq（0）.追加（“0%”）；
超时（）；
});
函数超时（）{
setTimeout（函数（）{
如果（perc首先，您需要一个其他变量。我调用了我的current，它的默认值是
0

然后，将您拥有
.eq（0）
的每个位置更改为
.eq（当前）

之后，在超时中添加
else
语句：

else{
    ++current;
    if(!$('.percentage').eq(current).html('0%').length) return;
    perc = 0;
}

小提琴：
使用以下javascript：

var perc = 0;

$('#upload_submit').click(function () {
    perc = 0;
     $('.percentage').eq(0).append("0%");
     timeout(0);
});

function timeout(item) {
     setTimeout(function () {
         if (perc <= 95) {
             perc = perc + 5;
             $('progress').eq(item).val(perc);
             $('.percentage').eq(item).html(perc + "%");
             timeout(item);
         }
         else {
             item++;
             if (item < 4) {
                 perc = 0;
                 $('.percentage').eq(item).append("0%");
                 timeout(item);
             }
         }
     }, 1000);
}

var perc=0；
$（“#上载_提交”）。单击（函数（）{
perc=0；
$（'.percentage'）.eq（0）.追加（“0%”）；
超时（0）；
});
功能超时（项目）{
setTimeout（函数（）{
如果（perc
var perc=0；
var fileCounter=0；
$（“#上载_提交”）。单击（函数（）{
超时（）；
});
函数超时（）{
setTimeout（函数（）{
如果（perc==0）{
$（'.percentage'）.eq（fileCounter）.append（“0%”）；
}
如果（perc）你没有断路器。它会增加
文件计数器，然后增加，然后再增加…绝对正确，这更像是一个说明性的例子！不过可以补充一下。我怀疑noone真的很关心它，但至少答案看起来是完整的：）Thx！完美！即使使用fiddle！
else{
    ++current;
    if(!$('.percentage').eq(current).html('0%').length) return;
    perc = 0;
}

var perc = 0;

$('#upload_submit').click(function () {
    perc = 0;
     $('.percentage').eq(0).append("0%");
     timeout(0);
});

function timeout(item) {
     setTimeout(function () {
         if (perc <= 95) {
             perc = perc + 5;
             $('progress').eq(item).val(perc);
             $('.percentage').eq(item).html(perc + "%");
             timeout(item);
         }
         else {
             item++;
             if (item < 4) {
                 perc = 0;
                 $('.percentage').eq(item).append("0%");
                 timeout(item);
             }
         }
     }, 1000);
}

var perc = 0;
var fileCounter = 0;
$('#upload_submit').click(function () {
    timeout();
});

function timeout() {
    setTimeout(function () {
        if (perc == 0) {
            $('.percentage').eq(fileCounter).append("0%");
        }

        if (perc <= 95) {
            perc = perc + 5;
            $('progress').eq(fileCounter).val(perc);
            $('.percentage').eq(fileCounter).html(perc + "%");
        } else {
            fileCounter++;
            perc = 0;
            if($('.percentage').length() < (fileCounter + 1)){
                return;
            }
        }
        timeout();
    }, 1000);
}