2017-01-14 3 views
2

Я пытаюсь получить ширину изображения, но он всегда не определяет. здесь является частью кодаjavascript переменная не работает должным образом

var w; 

var _URL = window.URL || window.webkitURL; 
var img = new Image(); 
img.src = _URL.createObjectURL(files[i]); 
img.onload = function () { 
    w = this.width; 
    console.log(w); // works 
}; 

console.log(w); // undefined 

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

Если я ввожу 4 файла, результат будет равен 4 undefined, а затем фактической ширине изображения.

+3

onload называется асинхронно, когда изображение загружается ... w будет неопределенным до тех пор, пока это не произойдет, ваш код за пределами функции onload не дождитесь загрузки изображения –

+0

@JaromandaX, так как я могу получить значение этого .width и использовать его за пределами onload – markoverflow

+1

простой ответ, вы не можете, сложный ответ, научитесь использовать асинхронный код, используя либо обратные вызовы, либо обещания –

ответ

2

JavaScript выполнить построчно. img.onload Функция также вызывается, когда загруженное изображение означает, что оно асинхронно. но в среднем время console.log(w); выполняет как синхронно и не зависит от img.onload function.If вы сначала объявляете переменную w, тогда она не печатала undefined.

0

var w;//Global variable (avoid this) 
 
    
 
    var _URL = window.URL || window.webkitURL; 
 
    var img = new Image(); 
 
    img.src = 'https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e'; 
 
    img.onload = function () { 
 
     w = this.width; 
 
     console.log('inside function:'+w); // works 
 
    }; 
 
    document.getElementById('content').appendChild(img) 
 
    console.log('outside function:'+w); // Because this happens before the onload function get called
<html> 
 
    <body> 
 
    <div id="content"></div> 
 
    </body> 
 
    </html>

0

img.onload = fun... просто зарегистрировать функцию к событию загрузки и перейти к следующей инструкции. Функция вызывается, когда выдается событие нагрузки, то есть после того, как позднее console.log(w) был выполнен с undefined значением w. Вы должны прочитать о Синхронные и Асинхронные звонки.

Смежные вопросы