jquery/javascript - 存儲引用數組 - 不是數組值

Question

我試圖將幾個相似的函數組合成單個函數，它需要調用不同的數組/變量，但我不是很清楚它的權利。這裏是我的代碼：

var initialPreloadArray = ['scenes/icons_orange.png','scenes/icons_blue.png','scenes/icons_green.png','site/pedestal_h.png']; //These must be loaded before we advance from the intro screen 
var initialPreloadCounter = 0; 
var secondaryPreloadArray = ['site/restart-black.png','site/back_black.png','interludes/city.png','interludes/town.png','interludes/country.png']; //These must be loaded before we can advance from the initial decision scene 
var secondaryPreloadCounter = 0; 
var vehiclesPreloadArray = ['vehicles/vehicles.png','site/close.png']; //These must be loaded before we can display the vehicles 
var vehiclesPreloadCounter = 0; 
var arrName; //Store the variable name of the array for the stage of preloading we're in 
var arrCounter; //Stores the variable name of the counter for the stage of preloading we're in 

function setPreloadStage(preloadStage){ 
    if (preloadStage == initial){ 
     arrName = initialPreloadArray; 
     arrCounter = initialPreloadCounter; 
    } else if (preloadStage == 'secondary'){ 
     arrName = secondaryPreloadArray; 
     arrCounter = secondaryPreloadCounter; 
    } else if (preloadStage == 'vehicles'){ 
     arrName = vehiclesPreloadArray; 
     arrCounter = vehiclesPreloadCounter; 
    } 
    preloadImages(preloadStage); 
} 



//Recurse through scene xml and populate scene array 
function preloadImages(preloadStage) { 
    console.log(arrName[arrCounter]); 
    var img = new Image(); 
    img.src = 'images/' + arrName[arrCounter]; 
    if(!img.complete){ 
     jQuery(img).bind('error load onreadystatechange', imageComplete(preloadStage)); 
    } else { 
     imageComplete(preloadStage); 
    } 

    //$j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'}); 
} 

function imageComplete(preloadStage){ 
    arrCounter++; 
    var preloadLength = arrName.length-1; 
    if (arrName && preloadLength && arrName[arrCounter]) { 
     if (preloadLength == arrCounter){ 
      if (preloadStage == 'initial'){ 
       initialImagesLoaded(); 
      } else if (preloadStage == 'secondary'){ 
       secondaryImagesLoaded(); 
      } else if (preloadStage == 'vehicles'){ 
       vehiclesLoaded(); 
      } 
     } 
     preloadImages(preloadStage); 
    } 
} 

任何人有一個想法我做錯了什麼？

Answer 1

我建議你應該使用數組來管理國家。

定義數組牽着你階段，像這樣：

var stages = [ 
    { 
    label : 'initial', 
    imgs : [ 'img/whoobee.png', ...more here...], 
    doneSoFar: 0, 
    allDone: function(){} 
    }, 
    { label : 'secondary', imgs : .....}, 
    { label : 'whatever', imgs : ....} 
]; 

注意：您將需要設置「allDone」 FN每個階段適當。

然後揭開序幕一個階段FN：

function kickoffPreloadOneStage(stage) { 
    console.log ("preloading stage " + stage.label); 
    preloadNextImage(stage); 
} 

function preloadNextImage(stage) { 
    var img = new Image();  
    img.src = 'images/' + stage.imgs[stage.doneSoFar];  
    if(!img.complete){  
     jQuery(img).bind('error load onreadystatechange', function() { 
      imageComplete(preloadStage); 
     });  
    } 
    else {  
     imageComplete(preloadStage);  
    } 
} 

function imageComplete(stage){  
    stage.doneSoFar++;  
    var preloadLength = stage.imgs.length-1;  
    if (stage.doneSoFar == preloadLength) { 
     stage.allDone(); // call the allDone function. may want to pass stage back 
    } 
    else { 
     preloadNextImage(stage);  
    }  
} 

要做到各個階段，用這樣的代碼：

var i; 
for(i=0; i < stages.length; i++) { 
    kickoffPreloadOneStage(stages[i]); 
} 

你也可以去OO，定義這些功能作爲一個成員Stage（）類，但是......我建議的是一個合理的簡化，不要太複雜。

Answer 2

其實，這裏有一個更明顯的問題：

jQuery(img).bind('error load onreadystatechange', imageComplete(preloadStage)); 

你將不得不這樣做：

jQuery(img).bind('error load onreadystatechange', function() { 
    imageComplete(preloadStage) 
});