如何减慢进度条？答案

【问题标题】：How do I slow the progress bar?如何减慢进度条？
【发布时间】：2013-03-13 00:39:51
【问题描述】：

我有以下代码：

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

效果很好，除了一个小小东西。进度条似乎太快了 100%。我宁愿把它放慢一点，这样我就可以得到一些看起来像是在彻底做某事的东西。

任何人都知道我可以如何放慢速度，以便我们可以真正看到进度条在工作？

代码中的 set() 和 get() 函数只是我创建的快速函数，用于将变量存储在隐藏的输入表单元素中，以允许 setTimeout 函数工作。

欣赏你的想法。

【问题讨论】：

$("##progressBar")?你的意思是$("#progressBar")，对吧？
您可以通过上传更大的文件来减慢速度。
@MattBall，哦，对不起... ## 是因为我在基于 ColdFusion 的环境中运行它，而 ## 转义了 #... 抱歉没有明确说明开始...
和@ahren，我试过这样做，但是reader.readAsDataURL(file); 函数具有这种独特的能力，可以将文件非常快速地转换为Base 64 ......我所追求的是可以在此转换后放置一个间隔，然后对进度条进行某种更新......尽我所能尝试，Timeout 语句的超时似乎不起作用，无论我将该值设为多大.. .
这样做是有理由的，即使没有，我们也不会质疑他的动机。

标签： javascript jquery css coldfusion drag-and-drop

【解决方案1】：

我不明白你为什么要这样做，为什么你要通过渐变而不是动画孩子的宽度来做这将允许你使用 css3 过渡延迟，但你可以轻松实现延迟只需在每次 updateProgress() 运行时添加一个小的 jquery-delay 即可获得效果。

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

http://api.jquery.com/delay/

【讨论】：