重新引入jquery函數來觸發百分比加載器

Question

我最近下載了jquery百分比加載器插件，並試圖重構一些代碼背後的代碼以滿足我需要。我有過上運行多個按鈕的點擊率裝載機這是工作的觸發器的代碼...

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