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

Question

出于演示目的，我想创建一个多文件上传进度条动画。到目前为止，我创建了以下 fiddle :http://jsfiddle.net/c2C6U/1/

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

文件的数量会有所不同，因为有一个拖放区。但计算它们很容易:var uploads = $('.progress').size();

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

代码:

HTML:

<div class="file">
    <div class="name">file1.png</div>
    <div class="progress"><progress max="100" value="0"></progress></div>
    <div class="percentage"></div>
</div>

<div class="file">
    <div class="name">file2.png</div>
    <div class="progress"><progress max="100" value="0"></progress></div>
    <div class="percentage"></div>
</div>

<div class="file"><div class="name">file3.png</div>
    <div class="progress"><progress max="100" value="0"></progress></div>
    <div class="percentage"></div>
</div>
<div id="upload_submit">Upload now</div>

CSS:

#upload_submit{
    width: 120px;
    height: 25px;
    line-height: 25px;
    background-color:#dedede;  
    color:#646464;
    text-align: center;
    float: right;
    cursor: pointer;
}


.file .name{
    width: 260px;
    float: left;
}

.progress{
    width: 200px;
    float: left;    
}

.percentage {
    width: 50px;
    margin-left: 10px;
    float: left;
}

.file .progress progress{
    width: 200px;
    background-color: #888;
    border: none;

}

.file:not(:first-child) .progress progress{    
    background-image: url('https://raw.githubusercontent.com/kopipejst/progressbar/master/skins/jquery-ui-like/pbar-ani.gif');
}

.progress progress::-moz-progress-bar { background: #dedede; }

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

Answer 1

首先，您需要另一个变量。我将我的电流称为电流，它的默认值为 0；

然后，将每个有 .eq(0) 的地方更改为 .eq(current)。

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

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

fiddle :http://jsfiddle.net/c2C6U/4/