0

我有一个 jQueryUI 进度条，在用我自己的 javascript 代码对其进行一系列移动之后，它开始快速向前和向后移动。这是相关的javascript代码：（需要控制台输入）

    $(document).ready(function() {
            $("#progressbar").progressbar({ value: 0 });
    });

    var pr = 0;
    var goTo = 0;
    var speedType = "fast";

    function prgMax(speed){
        speedType = speed;
        if(speedType == "slow") {
            if(pr < 101) {
                pr=pr+0.2;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout('prgMax("slow")', 0.1);
            }
            else{ return "Moved"; clearTimeout(); }
        }
        else {
            if(pr < 101) {
                pr=pr+1;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout(prgMax, 0.1);
            }
            else{ return "Moved"; clearTimeout(); }
        }
    }

    function prgMin(speed){
        speedType = speed;
        if(speedType == "slow") {
            if(pr > -1) {
                pr=pr-0.2;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout('prgMin("slow")', 0.1);
            }
            else{ return "Moved"; clearTimeout(); }
        }
        else {
            if(pr > -1) {
                pr=pr-1;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout(prgMin, 0.1);
            }
            else{ return "Moved"; clearTimeout(); }
        }
    }

    function prgSet(setting,speed){
        speedType = speed;
        goTo = setting
        if(speedType == "slow") {
            if(goTo > pr) {
                pr=pr+0.2;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout('prgSet(goTo,speedType)',0.1);
            }
            else if(goTo < pr) {
                pr=pr-0.2;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout('prgSet(goTo,speedType)',0.1);
            }
            else if(goTo == pr) { return "Moved"; clearTimeout(); }
        }
        else {
            if(goTo > pr) {
                pr=pr+1;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout('prgSet(goTo,speedType)',0.1);
            }
            else if(goTo < pr) {
                pr=pr-1;
                $("#progressbar").progressbar({ value: pr });
                var t = setTimeout('prgSet(goTo,speedType)',0.1);
            }
            else if(goTo == pr) { return "Moved"; clearTimeout(); }
        }
    }

还有我的 HTML

<div style="height:32px; display:inline-block; left:39px; right:5px; position:absolute;" id="progressbar"></div>

我通过将 clearTimeout() 添加到 else if 语句来解决部分问题，但是当我将以下系列放入控制台时，进度条开始来回移动：

prgMax() //Wait until it's done then
prgMin("slow") //Wait until it's done then
prgSet(5,"slow")

有没有人有任何想法？在此先感谢，如果有什么不明白的地方，请发表评论！

4

2 回答 2

1

您不应该使用字符串，setTimeout()而是使用函数。此外，0.1毫秒可能太短，浏览器可以处理的最小值约为 4 毫秒。

于 2012-06-27T23:42:38.987 回答
0

I recommend to use a simple and nice progressbar. This one doesn't have jQuery and it's very easy to use: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

于 2012-07-03T13:03:41.053 回答