Verlust des globalen Werts in Funktion

Question

frage mich, ob jemand helfen kann.

bascially In Javascript versuche ich, die Bildgrößen eines Bildes zu erfassen, bevor es auf die Seite geladen wurde, so dass ich einige Thumbnails in einer Galerie in der Größe ändern kann.

Der Pfad funktioniert einwandfrei, der Preloader funktioniert gut, und ich kann die Breite & Höhe wird in der getWidthAndHeight-Funktion erfasst.

Mein Problem ist, ich versuche, dies zu einer globalen Variablen in anderen Funktionen zu verwenden, aber die globale Variable ist außerhalb der Funktion getWidthAndHeight verloren. (Ich habe die globale Variable am Anfang der Datei deklariert, zB var gwidth)

Ich habe nicht gedacht, aber es funktioniert alles, wenn ich den Alarm (gwidth) da drin stecke! offensichtlich schalte ich die Alarmbox nicht aus - irgendwelche Ideen, warum das nur funktioniert, wenn die Warnung drin ist, und warum der globale Wert seinen Wert verlieren könnte, wenn die Warnung deaktiviert ist?

Dank

function getWidthAndHeight() { 
    gwidth = this.width; 
    alert(gwidth); 
    gheight = this.height; 
    return true; 
} 
function loadFailure() { 
    alert("'" + this.name + "' failed to load."); 
    return true; 
} 




function getImgSize(gim_imgSrc) 
{ 

var myImage = new Image(); 

myImage.name = gim_imgSrc; 
myImage.onload = getWidthAndHeight; 
myImage.onerror = loadFailure; 
myImage.src = gim_imgSrc; 

getWidthAndHeight(myImage); 
alert("width is" + gwidth); 
alert(testglobal); 

return gwidth; 

} 

Answer 1

Es ist nicht asynchron, da das Bild onload-Ereignis ausgelöst arbeiten (das heißt möglicherweise, nachdem Sie haben gwidth zurückgegeben). Es funktioniert, wenn Sie alarmieren, weil Sie die Ausführung für einige Sekunden verzögern und dem Image somit Zeit zum Laden geben.

können Sie versuchen, eine Callback-Funktion übergeben:

function getImgSize(gim_imgSrc, callback) { 
    var myImage = new Image(); 
    myImage.src = gim_imgSrc; 
    myImage.onload = function() { 
     getWidthAndHeight(); 
     callback(gwidth); 
    }; 
} 

Answer 2

Globals are evil. Verwenden Sie closures.

var getImgSize = (function() { 
    var gwidth, gheight; 
    function getWidthAndHeight() { 
     gwidth = this.width; 
     alert(gwidth); 
     gheight = this.height; 
     return true; 
    } 
    function loadFailure() { 
     alert("'" + this.name + "' failed to load."); 
     return true; 
    } 

    return function (gim_imgSrc) { 
     var myImage = new Image(); 

     myImage.name = gim_imgSrc; 
     myImage.onload = getWidthAndHeight; 
     myImage.onerror = loadFailure; 
     myImage.src = gim_imgSrc; 

     getWidthAndHeight(myImage); 
     alert("width is" + gwidth); 
     alert(testglobal); 

     // this probably won't work 
     return gwidth; 
    }; 
})(); 

gibt es auch ein Problem, dass Bildlade asynchron ist (das heißt, wenn getImgSize zurückkehrt, kann das Bild nicht geladen). Jeder Code, der vom Rückgabewert getImgSize abhängt, sollte stattdessen in einen Rückruf umgewandelt werden.

function getImgSize(gim_imgSrc, didLoad, didntLoad) { 
    var myImage = new Image(); 

    myImage.name = gim_imgSrc; 
    myImage.onload = function() { 
     // you don't really need this 
     //getWidthAndHeight.call(myImage); 
     // the following should be enough 
     return didLoad(myImage, myImage.width, myImage.height); 
    }; 
    myImage.onerror = function() { 
     return didntLoad(myImage); 
    } 
    myImage.src = gim_imgSrc; 
}