私は画像の幅を取得しようとしていますが、それは常に未定義です。ここで）コード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
の一部であると私は（関数内のコンソールではない最初に呼ばれている最後のコンソールログに気づく、そして、それが正しい動作ですか？私はそれが関数を1行ずつ呼び出すと思っていたからです。
私が4つのファイルを入力した場合、結果は最初に4 undefinedになり、実際の画像の幅になります。
Javascriptが非同期であり、あなたは
onload funcは非同期
http://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/
JavaScriptが行ずつ実行し、実行しますonloadの外console.log(w)を呼び出すことはできません。 img.onloadイメージがロードされたときにその関数が呼び出されるのは、それが非同期であることを意味します。しかし、平均でconsole.log(w);は同期しており、img.onload関数に依存しません。最初にw変数を宣言すると、undefinedは印刷されません。
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>img.onload = fun...だけloadイベントに関数を登録し、次の命令のために渡します。この関数は、後でconsole.log(w)が実行された後に、undefinedの値がwのロードイベントが発生したときに呼び出されます。 シンクロナスと非同期についてお読みください。
onloadは非同期に呼び出されます。画像がロードされると、それが発生するまで未定義になります。オンロード関数外のコードは画像がロードされるのを待ちません。 –
@JaromandaXどうすればこの値を取得できますか.widthとonloadの外でそれを使用してください – markoverflow
簡単な答えは、あなたは、複雑な答え、どのコールバックや約束を使用して非同期コードを使用する方法を学ぶことはできません –