JavaScript代码重构

Question

I have the following code which is working

var exif = function(exifObject) {
    alert(exifObject.Orientation);
}

$(this).fileExif(exif);

Problem is, I need the alerted value after $(this).fileExif(exif) line.

So I tried doing the following:

function getOrientation(exifObject){
    return(exifObject.Orientation);
}
getOrientation($(this).fileExif());

It does not work. How could I achieve to have the alerted value after $(this).fileExif(exif) line?

Additional info

console.log(exifObject) returns an Object with an array of attributes, fe Orientation .

$(this) is wrapped in this code:

$('body').on('change', '#imgFile', function(event) {

so it's an input type file.

Answer 1

You are passing exif , which is a function, to the fileExif function. This is an example of the fact that functions are first-class objects in JavaScript, and in this case exif is a "callback" function. That is, when the fileExif function is finished, it passes it's result to the exif function, which is then called.

In terms of execution, the alert will be called after the fileExif function. However, if you desperately want the code to be written after the function, you could declare the function as you pass it:

$(this).fileExif(function(exifObject) {
    alert(exifObject.Orientation);
});

However, this is probably not as clear as the original.

Answer 2

I find only one fileExif plugin for jQuery. Here it sources . This plugin use native FileReader . FileReader load file asynchronously. You have 2 way. First - modify plugin code and make it sync (bad idea). Write your code with asycn style (best practice).