Prüfen, ob Bild vorhanden ist, Wert der Variablen nicht ändern

Question

Dieser Code prüft, ob ein Bild existiert oder nicht.

In der Funktion onload möchte ich die Variable 'control' mit einem booleschen Wert ändern.

var control = 'a.jpg'; 
var image_name = control; 
var image = new Image(); 

image.onload = function() { 
    control = true; // Why this change does not happen outside of this function? 
}; 
image.onerror = function() { 
    control = false; // Why this change does not happen outside of this function? 
}; 
image.src = image_name; 

console.log(control); // The value is not changed in a boolean 

Aber außerhalb der Funktion wird die Variable nicht geändert. Warum?

Dank

Answer 1

Die Funktion image.onload nur ausgeführt, wenn die Bilder geladen, kann es dauern 500-1200ms ausführen,

console.log(control); Ausführung vor dem Bild, das ist geladen, warum

falsch dargestellt alway als

versuchen, die Kontrolle zu drucken Wert nach wenigen Sekunden Verzögerung

var control = 'a.jpg'; 
var image_name = control; 
var image = new Image(); 

image.onload = function() { 
    control = true; // Why this change does not happen outside of this function? 
}; 
image.onerror = function() { 
    control = false; // Why this change does not happen outside of this function? 
}; 
image.src = image_name; 
setTimeout(function(){ 
console.log(control); // its work 
},2000); 

wie diese

Ihre Codestruktur ändern

var control = 'a.jpg'; 
var image_name = control; 
var image = new Image(); 

image.onload = function() { 
    control = true; 
    nextProcess(); 
}; 
image.onerror = function() { 
    control = false; 
    nextProcess(); 
}; 
image.src = image_name; 
function nextProcess(){ 
    console.log(control); 
} 

Answer 2

Das ist, weil die console.log(control); vor genannt genannt werden die onload oder onerror Funktionen von image.

Die Variable control ändert sich, aber Sie rufen die log, bevor es sich ändert.

var control = 'a.jpg'; 
var image_name = control; 
var image = new Image(); 

image.onload = function() { 
    control = true; 
    after(); 
}; 
image.onerror = function() {   
    control = false; 
    after(); 
}; 
image.src = image_name; 

function after(){ 
    alert(control); 
    console.log(control); 
} 

Sie können auch überprüfen Sie es in diesem JSFiddle: Sie können Ihren Code so etwas wie dieses, um zu erreichen, was Sie wollen, ändern.