Question

我正在尝试获取图像的宽度，但它总是取消定义。这是代码的一部分

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，然后是图像的实际宽度。

Answer 1

JavaScript逐行执行。加载图像时也会调用img.onload函数，这意味着它是异步的。但同时console.log(w);执行同步而不依赖于img.onload函数。如果您首先声明w变量，则不会打印undefined

Answer 2

Javascript是异步的，您无法在onload

之外调用console.log(w)

onload func将异步执行

http://www.sohamkamani.com/blog/2016/03/14/wrapping-your-head-around-async-programming/

Answer 3

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>

Answer 4

img.onload = fun...只需将函数注册到load事件并传递下一条指令。在发出load事件时调用该函数，即在console.log(w)执行后undefined w值function checkMessage(){ var params = { QueueUrl : Constant.QUEUE_URL, VisibilityTimeout: 0, WaitTimeSeconds: 0 } sqs.receiveMessage(params,(err,data) => { if(data){ console.log("%o",data); } }); }。您应该阅读同步和异步电话。

javascript变量无法按预期工作

4 个答案: