Question

我最近下载了jquery percentage loader插件，并尝试重构示例背后的一些代码以满足我的需要。我所拥有的代码在单击运行多个按钮时触发百分比加载器...

$().ready(function() {

    // Multiple loaders

    $("#multiple-loader-container").children().each(function (i) {
        var loader = $(this).percentageLoader({width:225, height:225});

        $("#run-multiple").click(function () {
            var thisLoaderRunning = false;
            var totalValue = (i + 1) * 333.0;
            var value = 0;
            // A function representing a single 'frame' of our animation
            var animateFunc = function() {
                value += 17;    
                if (value > totalValue) {
                    value = totalValue;  
                }
                loader.setProgress(value / totalValue);
                loader.setValue(value.toString() + 'kb');
                if (value < totalValue) {
                    setTimeout(animateFunc, 25);
                } else {
                    thisLoaderRunning = false;
                }
            }               
            setTimeout(animateFunc, 25);
            return false;
            });
        });
});    
function setProgress(value) {
    var volumeDb = Math.round(-100.0 + value);
    $controllableLoader.setValue(volumeDb + ' db');
}

我试图将此更改为无按钮工作，并在页面加载2秒后触发百分比加载器。我会发布我尝试的内容，但我无法完成它的工作。只是寻求一些帮助。

var progressBarTimer = null;
var progressBarTimerInterval = 2000;
$().ready(function() {              
    // Multiple loaders     
    $("#multiple-loader-container").children().each(function (i) {
        var loader = $(this).percentageLoader({width:225, height:225});         
            setTimeout(animateLoaders(null,i), progressBarTimerInterval);           
        });
});

function setProgress(value) {
    var volumeDb = Math.round(-100.0 + value);
    $controllableLoader.setValue(volumeDb + ' db');
}

function animateLoaders(value, i) {
    var thisLoaderRunning = false;
    var totalValue = (i + 1) * 333.0;
    var value = 0;
    // A function representing a single 'frame' of our animation
    var animateFunc = function() {
        value += 17;    
        if (value > totalValue) {
            value = totalValue;  
        }
        loader.setProgress(value / totalValue);
        loader.setValue(value.toString() + 'kb');
        if (value < totalValue) {
            setTimeout(animateLoaders, 25);
        } else {
            thisLoaderRunning = false;
        }
    }
    setTimeout(animateLoaders, 25);
    return false;
}

感谢答案提示。我所做的是将代码更改为此...

$().ready(function() {

// Multiple loaders
$("#multiple-loader-container").children().each(function (i) {
    var loader = $(this).percentageLoader({width:225, height:225});

    var thisLoaderRunning = false;
    var totalValue = (i + 1) * 333.0;
    var value = 0;      
    var animateFunc = function() {
        value += 17;    
        if (value > totalValue) {
            value = totalValue;  
        }
        loader.setProgress(value / totalValue);
        loader.setValue(value.toString() + 'kb');
        if (value < totalValue) {
            setTimeout(animateFunc, 25);
        } else {
            thisLoaderRunning = false;
        }
    }
    setTimeout(animateFunc, 25);
    });
});

function setProgress(value) {
    var volumeDb = Math.round(-100.0 + value);
    $controllableLoader.setValue(volumeDb + ' db');
}

Answer 1

您正在调用animateLoaders(null,i)，但调用该函数并不会返回另一个函数，它会返回一个布尔值。但setTimeout函数需要一个函数作为其第一个参数运行。

尝试将您的通话更改为setTimeout，如下所示：

$("#multiple-loader-container").children().each(function (i) {
    var loader = $(this).percentageLoader({width:225, height:225});         
    setTimeout(function() { 
        animateLoaders(null,i); 
    }, 
    progressBarTimerInterval);
});

重新计算jquery函数以触发百分比加载器

1 个答案: