Функция image.onload с возвратом - PullRequest
Новая
       19

Функция image.onload с возвратом

9 голосов
/ 15 сентября 2011

У меня есть функция JS, где вычисляется значение, и это значение должно быть возвращено, но я получаю каждый раз undefined, но если я console.log(), результат в этой функции работает.Не могли бы вы помочь? 

function detect(URL) {
    var image = new Image();
    image.src = URL;
    image.onload = function() {
        var result = [{ x: 45, y: 56 }]; // An example result
        return result; // Doesn't work
    }
}

alert(detect('image.png'));

Ответы [ 5 ]

24 голосов
/ 15 сентября 2011

Значение возвращается, но не из функции detect.

Если вы используете именованную функцию для обработчика события загрузки вместо анонимной функции, то будет понятнее, что происходит: 

function handleLoad() {
  var result = [{ x: 45, y: 56 }];
  return result;
}

function detect(URL) {
  var image = new Image();
  image.src = URL;
  image.onload = handleLoad;
}

Значение возвращается из функции handleLoad в код, который вызывает обработчик событий, но функция detect уже вышла до этого.В функции detect нет даже оператора return, поэтому вы не можете ожидать, что результатом будет что-либо, кроме undefined.

Один из распространенных способов обработки асинхронных сценариев, подобных этому, должен использовать функцию обратного вызова: 

function detect(URL, callback) {
  var image = new Image();
  image.src = URL;
  image.onload = function() {
    var result = [{ x: 45, y: 56 }];
    callback(result);
  };
}

Вы вызываете функцию detect с обратным вызовом, который будет вызван, когда будет доступно значение: 

detect('image.png', function(result){
  alert(result);
});
3 голосов
/ 15 сентября 2011

Я получаю это сам:

Я не знал, что могу назначить переменную для этой (для меня уже выделенной) загрузки. 

function detect(URL) {
    var image = new Image();
    image.src = URL;
    var x = image.onload = function() {
        var result = [{ x: 45, y: 56 }]; // An example result
        return result;
    }();
    return x;
}

alert(detect('x'));
3 голосов
/ 15 сентября 2011

Это потому, что функция обнаружения ничего не возвращает, так как событие загрузки происходит после завершения функции. И вы забыли добавить изображение к чему-либо, чтобы оно никогда не загружалось.

Вы можете сделать что-то вроде: 

function detect(URL) {
    var image = new Image();
    image.src = URL;
    image.onload = function() {
        var result = 'result'; // An example result
        alert(result); // Doesn't work
    }
    document.body.appendChild(image)
}

detect('http://www.roseindia.net/javascript/appendChild-1.gif');

скрипка здесь http://jsfiddle.net/LVRuQ/

2 голосов
/ 15 сентября 2011

detect() не возвращает никакого значения.Если вы хотите получить оповещение, замените return result; на alert(result).

Анализ вашего кода: 

function detect(URL) {
    ...
    image.onload = function(){ //assigning an event handler (function) to an object
        ...
        return result; //this return statement is called from within another function
    }
}//function "detect" ends here. No return statement has been encountered
1 голос
/ 15 сентября 2011

Ваша функция detect ничего не возвращает, поэтому alert показывает "undefined".Выражение return, которое, как вы утверждаете, не работает, возвращает анонимную функцию, назначенную для image.onload, и, вероятно, работает нормально, если вы вызовете эту функцию.

...