Javascript 如何减慢进度条？

我有以下代码：

<td id="drop-files" ondragover="return false;" colspan="2">
    <br />Drag and drop files to be uploaded...<br /><br />
    <input type="hidden" id="iFile" value="" /><input type="hidden" id="numFiles" value="" />
   <div id="progressBar" style="width: 300px; height: 20px; border-radius: 20px; border: 1px solid rgb(0,0,0); opacity: 0; text-align: center; background: -moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) 0%, rgb(255,255,255) 0%, rgb(255,255,255) 100%);">0%</div><br />
   <div id="fileCase"></div>
</td>

// Note: The double ## is not a mistake. The code is running under  
// ColdFusion where # is a is reserved character. So ## escapes the #
$(document).ready(function() {
    function pad(number, digits) {
        return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
    }

    function processFile(file,num,arr){
        var inputRow = "<input type='hidden' value='' id='file_"+pad(arr,3)+"' name='file_"+pad(arr,3)+"' />";
        $("##fileCase").append(inputRow);
        var o = $("##file_"+pad(arr,3));
            var reader = new FileReader();
            reader.onload = function(e) {
                o.val(e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;"));
            }
            reader.readAsDataURL(file);
    }

    function updateProgress(idx,tot){
        var midPt = Math.floor((idx)/tot*100);
        $("##progressBar").css("background","-moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) "+midPt+"%, rgb(255,255,255) "+midPt+"%, rgb(255,255,255) 100%)");
        $("##progressBar").html(midPt+"%");
    }
    // Sets up dataTransfer event
    jQuery.event.props.push('dataTransfer');
    // File Array
    var nameArray = [];
    $("##fileCase").append("<input type='hidden' id='nameArray' value='' name='nameArray'>");

    // Bind drop to drop zone
    $('##drop-files').bind('drop', function(e) {
        var iFile = 0;
        // Prevents element from default function
        e.preventDefault();
        // Grabs list of files
        var files = e.dataTransfer.files;
        var numFiles = files.length;set("numFiles",numFiles);
        $("##progressBar").animate({opacity: 1},500);
        // Loop through files...
        updateProgress(0,numFiles);
        $.each(files, function(index, file) {
            nameArray.push(files[index].name);
            arr = nameArray.length;
            $("##nameArray").val(nameArray.join("|"));
            processFile(files[index],index+1,arr);
            iFile++;set("iFile",iFile);
            //setTimeout("updateProgress("+iFile+","+numFiles+");",250);
            setTimeout("var midPt = Math.floor(get('iFile')/get('numFiles')*100);$('##progressBar').css('background','-moz-linear-gradient(left, rgb(32,96,160) 0%, rgb(32,96,160) '+midPt+'%, rgb(255,255,255) '+midPt+'%, rgb(255,255,255) 100%)');$('##progressBar').html(midPt+'%');",500)
        });
    });
});

拖放要上载的文件…


0%

//注意：双##不是错误。代码正在运行
//ColdFusion，其中#是保留字符。所以##逃离了#
$（文档）.ready（函数（）{
功能板（数字、数字）{
返回数组（Math.max（digits-String（number）.length+1,0））.join（0）+number；
}
函数processFile（文件，num，arr）{
var inputRow=“”；
$（“##fileCase”）.append（inputRow）；
var o=$（“##文件#”+pad（arr，3））；
var reader=new FileReader（）；
reader.onload=函数（e）{
o、 val（e.target.result.replace（//g，“”））；
}
reader.readAsDataURL（文件）；
}
函数更新进程（idx、tot）{
var midPt=数学地板（（idx）/tot*100）；
$（“###progressBar”）.css（“背景”，“-moz线性渐变（左，rgb（32,96160）0%，rgb（32,96160）”+midPt+“%，rgb（255255255）”+midPt+“%，rgb（255255）100%）；
$（“##进度条”）.html（midPt+“%”）；
}
//设置数据传输事件
jQuery.event.props.push（'dataTransfer'）；
//文件数组
var nameArray=[]；
$（“##fileCase”）。追加（“”）；
//将放置区绑定到放置区
$（'##drop files'）.bind（'drop'，函数（e）{
变量iFile=0；
//阻止元素使用默认函数
e、 预防默认值（）；
//抓取文件列表
var files=e.dataTransfer.files；
var numFiles=files.length；set（“numFiles”，numFiles）；
$（“##进度条”）.animate（{opacity:1}，500）；
//循环浏览文件。。。
updateProgress（0，numFiles）；
$.each（文件、函数（索引、文件）{
nameArray.push（文件[index].name）；
arr=nameArray.length；
$（“##nameArray”）.val（nameArray.join（“|”）；
processFile（文件[index]，索引+1，arr）；
iFile++；设置（“iFile”，iFile）；
//setTimeout（“updateProgress”（“+iFile+”，“+numFiles+”）；”，250）；
setTimeout（'var midPt=Math.floor（get（'iFile'）/get（'numFiles'）*100）；$（'progressBar'）.css（'background'，'-moz线性渐变（left，rgb（32,96160）0%，rgb（32,96160）+midPt+%，rgb（255255）+midPt+%，rgb（255255）100%）；$（'progressBar'）.html（midPt+'），500）
});
});
});

它工作得很好，除了一件小事。进度条似乎上升到100%太快了。我宁愿把它慢一点，这样我就可以得到一些看起来它正在做的事情

有人知道我怎样才能让进度条慢下来吗

代码中的

set（）

和

get（）

函数只是我用来在隐藏的输入表单元素中存储变量的快速函数，以允许

setTimeout

函数工作

---

欣赏你的想法。

我不明白你为什么要这么做，为什么你要用渐变来代替子对象的宽度动画，这样你就可以使用css3转换延迟，但是每次运行updateProgress（）时只需添加一个小的jquery延迟，你就可以轻松实现延迟效果

只需在更新css之前将其链接起来

---

$（“##进度条”）

？你的意思是

$（“#progressBar”）

，对吗？你可以上传一个更大的文件来降低速度。@MattBall，哦，对不起。。。之所以使用###是因为我在基于ColdFusion的环境中运行它，而###逃避#。。。很抱歉一开始没有说清楚，@ahren，我已经试过了，但是

reader.readAsDataURL（文件）函数具有将文件快速转换为Base 64的独特功能。。。我所追求的是在转换后设置一个间隔，然后对进度条进行某种更新。。。尽管我可以尝试，超时语句的超时似乎不起作用，不管我的值有多大……这样做是有原因的，即使没有，我们也不是来质疑他的动机的。