javascript var in inested function as event

Question

У меня есть этот скрипт, который работает (не в части if), чтобы проверить размер изображения. картина должна под 300x300 и этот сценарий всегда возвращает ложь (даже для 100x100 изображений)

function validate_dimention(fileName) { 
    input = document.getElementById("profilepic"); 
    file = input.files[0]; 
    var reader = new FileReader(); 
    var image = new Image(); 
    var width; 
    var height; 
    reader.readAsDataURL(file); 
    reader.onload = function(pic) { 
     image.src = pic.target.result; 
     image.onload = function() { 
      width = this.width; //panjang 
      height = this.height; //lebar 
     } 
    } 
    if (width <= 300 && height <= 300) { 
     return true; 
    } else { 
     console.log(width); 
     console.log(height); 
     return false; 
    } 
} 

журнал консоли всегда возвращается и как неопределенный (так код не имеет синтаксиса EROR) ,, есть способ так ширина равно // panjang и height равно // lebar ??

Answer 1

Это потому, что onload является событием и является асинхронным. Он будет вызываться после загрузки изображения. Просто переместите условие внутри функции onload, чтобы решить эту проблему. Но из-за этого асинхронного вызова вы не сможете напрямую использовать любое значение return. Вы должны будете использовать обратный вызов, где вы будете делать код в зависимости от результата:

function validate_dimention(fileName, callback) { 
    input = document.getElementById("profilepic"); 
    file = input.files[0]; 
    var reader = new FileReader(); 
    var image = new Image(); 
    var width; 
    var height; 
    reader.readAsDataURL(file); 
    reader.onload = function(pic) { 
     image.src = pic.target.result; 
     image.onload = function() { 
      width = this.width; //panjang 
      height = this.height; //lebar 
      if (width <= 300 && height <= 300) { 
       callback(true); 
      } else { 
       callback(false); 
      } 
     } 
    } 
} 

// And you call it that way : 
validate_dimention(fileName, function (result) { 
    // Do whatever you want, using result as the result of your function. It 'll be either true or false. 
});