Autor Zpráva
hunter_dave
Profil
Zdravím, narazil jsem na problém s js.
Mám následující kód:
for(i = 0; i < 5; i++){
     var img = new Image();
     img.onload = function(){
          //práce s nahraným obrázkem, kde potřebuji také využit proměnnou i
     }
}
Problém nastává, protože než se obrázek načte a proběhne obsah fce onload, tak už se provede několik dalších cyklů, což znamená, že až fce proběhne poprvé tak v proměnné i nebudu mít 0 ale 5.

Takže můj dotaz zní, jak dostat do té funkce onload proměnnou i, která už tam zůstane.
Bohužel nic takového jako img.onload = function(i){ nefunguje za i se dosadi [object Event], nebo něco podobného, ani function(int = i){ nefunguje, nevím jak dál.
Joker
Profil
hunter_dave:
Bohužel nic takového jako img.onload = function(i){ nefunguje za i se dosadi [object Event]
Tohle přece do funkce nevloží hodnotu i, ale vyrobí parametr jménem i. A obsluze události se jako argument předá objekt té události.

ani function(int = i){
A tohle nedává ani smysl.

Asi nejsnazší řešení je uložit si hodnotu i přímo do toho objektu jako atribut.
quatzael
Profil
hunter_dave:
Popisuješ svůj problém asi trochu složitě. Nejspíš jsi myslel, jak udělat to, aby se rozjel další cyklus teprve potom co proběhne celá funkce, ne?


Jinak nepotřebuješ v Tvým případě žádnou proměnnou "i" v tý funkci.. Nebo si tu hodnotu můžeš ještě před cyklem uložit do jiný proměnný. Ale nevím přesně o co se snažíš..
hunter_dave
Profil
Joker:
chtel jsem vytvorit promenou int do ktere bych vlozil i jako vychozi .. jako, kdyz vytvaris fci .. function nazev_fce(promenna = true) napriklad
To s tím atributem vyzkouším, díky moc

quatzael:
Jde o animaci v html5, aby to bylo plynule tak nemuzu cekat az se to provede. a tu promenou i potrebuju protoze se tam stridaj symboly, ktere mam ulozene v dvourozmernem poli. celý zápis té fce pak bude:

img.onload = function(){
     context.drawImage(images[symbols[i][j].value], symbols[i][j].x, symbols[i][j].y);
}
_es
Profil
hunter_dave:
for(i = 0;
Viď Časté potíže, zajímavosti a poučné debaty » Používejte var.
Asi potrebuješ niečo ako:
for(var j = 0; j < 5; j++){
  var img = new Image();
  (function(i){     
    img.onload = function(){
    //práce s nahraným obrázkem, kde potřebuji také využit proměnnou i
  })(j);
}
hunter_dave
Profil
_es:
Co přesně dělá to (function(i){})(j), jinak ve var to není, používám ho všude, jen sem jsem napsal do toho cyklu "i" bez var
_es
Profil
hunter_dave:
Co přesně dělá to
Viď Časté potíže, zajímavosti a poučné debaty » Uchování hodnot proměnných v anonymních funkcích — lexikální uzávěry.
hunter_dave
Profil
Tak vyřešeno pomocí nápadu Jokera ale mám další problém: Obrázek se při každém kroku animace znovu nahraje, což je +- 16 milisekund a dost nepříjemně to bliká (safari), v chromu se to vůbec nezobrazí. Nevěděl by si s tím někdo rady? Tady je kód:
function drawSymbols(symbols) {
     for(i = 0; i < document.getElementsByTagName("canvas").length; i++){
          canvas = document.getElementsByTagName("canvas")[i];
          context = canvas.getContext('2d');
                        
          for(j = 0; j < symbols[i].length; j++){
               context.beginPath();
               context.rect(symbols[i][j].x, symbols[i][j].y, symbolWidth, symbolHeight);
                            
               var img = new Image();
               img.i = i;
               img.j = j;
               img.ctx = context;
                            
               img.onload = function(){
                    this.ctx.drawImage(this, symbols[this.i][this.j].x, symbols[this.i][this.j].y);
               }
               img.src = "symbols/"+symbols[i][j].value+".png";
                            
               context.lineWidth = symbolBorder;
               context.strokeStyle = 'black';
               context.stroke();
          }
     }
}
V proměnné symbols mám uložené jednotlivé symboly a název příslušného obrázku.


Tak vše vyřešeno. Díky všem za pomoc, do proměné symbols sem si nahrál obrázek a k němu vlastnost loaded.. pokud už byl nahraný, znovu se nenačítal.

Řešení:
//pole se symboly
var symbols = new Array();
for(i = 0; i < document.getElementsByTagName("canvas").length; i++)
     symbols[i] = new Array();
                
symbols[0][0] = {x: 0, y: 0, value: 'bonus', image: new Image()};
symbols[0][1] = {x: 0, y: 0, value: 'grape', image: new Image()};
symbols[0][2] = {x: 0, y: 0, value: 'cherry', image: new Image()};
//atd...

//fce drawSymbols
function drawSymbols(symbols) {
     for(i = 0; i < document.getElementsByTagName("canvas").length; i++){
          canvas = document.getElementsByTagName("canvas")[i];
          context = canvas.getContext('2d');
                        
          for(j = 0; j < symbols[i].length; j++){
               context.beginPath();
               context.rect(symbols[i][j].x, symbols[i][j].y, symbolWidth, symbolHeight);
                            
               var img = new Image();
               img.i = i;
               img.j = j;
               img.ctx = context;
                            
               if(!symbols[i][j].image.loaded){
            symbols[i][j].image.i = i;
            symbols[i][j].image.j = j;
            symbols[i][j].image.ctx = context;
                                
            symbols[i][j].image.onload = function(){
                this.ctx.drawImage(this, symbols[this.i][this.j].x, symbols[this.i][this.j].y);
            };
            symbols[i][j].image.src = "symbols/"+symbols[i][j].value+".png";
            symbols[i][j].image.loaded = true;
        }
        else
            context.drawImage(symbols[i][j].image, symbols[i][j].x, symbols[i][j].y);
                            
               context.lineWidth = symbolBorder;
               context.strokeStyle = 'black';
               context.stroke();
          }
     }
}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: