檢查圖像是否存在，變量值不變

Question

該代碼檢查是否存在圖像。

函數onload內部我想用布爾值更改變量'control'。

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 

但是在函數之外，變量沒有改變。爲什麼？

感謝

Answer 1

功能image.onload只加載圖像後執行的，它可能需要500-1200ms執行，

console.log(control);加載圖像這就是爲什麼送花兒給人顯示爲假

嘗試打印控制之前執行幾秒鐘的延遲後的值

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); 

更改您的代碼結構類似這樣的

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

這是因爲被稱爲的image的onload或onerror功能之前，先console.log(control);被調用。

control可變更改，但您在更改之前調用log。您可以修改代碼以這樣的事，以達到你想要什麼：

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); 
} 

您還可以檢查它在這個JSFiddle。