Question

我有一个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")

有没有人有任何想法？提前谢谢，如果没有意义，请发表评论！

Answer 1

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

Answer 2

我建议使用一个简单而漂亮的进度条。这个没有jQuery，它很容易使用：http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

jQuery Progressbar Moving

2 个答案: