Jquery /存储对数组的引用-而不是数组值

jquery / storing reference to array - not array values

本文关键字：数组 存储 Jquery 引用      更新时间：2023-09-26

我试图将几个类似的函数组合成一个函数，需要调用不同的数组/变量，但我没有完全正确。下面是我的代码:

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);
    }
}
有人知道我做错了什么吗?

实际上，这里有一个更明显的问题:

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

你必须这样做:

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

我建议您应该使用数组来管理状态。

定义一个数组来保存阶段，如下所示:

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()类的成员，但是....我的建议是在不太复杂的情况下合理地简化。

相关文章：