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

我最近下载了jquery percentage loader插件，并试图重构示例背后的一些代码，以满足我的需要。我所拥有的代码在点击run multiple按钮时触发百分比加载程序

$().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');
}

您调用的是animateLoaderSnall，i，但调用该函数不会返回另一个函数，而是返回一个布尔值。但是setTimeout函数需要一个函数作为其第一个参数运行

尝试将调用更改为setTimeout，如下所示：

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