for 循环中创建图片并监听 onload 事件失败

Question

问题：通过循环创建图片，并在每个图片加载完成之后执行函数，不过每次都是触发最后一个图片的 onload 事件。
代码：

var src=[
  "http://www.w3school.com.cn/i/site_photoref.jpg",
  "http://www.w3school.com.cn/i/site_photoexa.jpg",
  "http://www.w3school.com.cn/i/site_photoqe.jpg"
]
for(var i=0;i<3;i++){
  var img=new Image();
  img.src=src[i];
  img.onload=function(){
    console.log(img)
  }
}

执行结果是：

<img src="http://www.w3school.com.cn/i/site_photoqe.jpg">
<img src="http://www.w3school.com.cn/i/site_photoqe.jpg">
<img src="http://www.w3school.com.cn/i/site_photoqe.jpg">

我的需求是获得每个图片加载完成之后执行相应的函数，有没有什么好的解决办法？

Answer 1

js里的事件是异步的，而js异步的最大特点就是得等主线程跑完了才轮的到它执行……在这段程序里，onload只是注册了个事件回调，主程序for还没跑完，它根本没机会切入Event Loop执行事件回调……而等for跑完了，img就一个，所以三遍console.log才打的是一个东西。
而要console.log出三个，一个思路是不要用for，直接用onload驱动就行了。比如我简单写了个递归：

var src=[
    "http://www.w3school.com.cn/i/site_photoref.jpg",
    "http://www.w3school.com.cn/i/site_photoexa.jpg",
    "http://www.w3school.com.cn/i/site_photoqe.jpg"
];

function nextSrc(srcArr, sig){
    var img=new Image();
    img.onload=function(){
        console.log(img.src);
        nextSrc(srcArr, sig + 1);
    }
    img.src=src[sig];
}
nextSrc(src, 0);

Answer 2

好说。var改let即可。es5没有块级作用域只有函数作用域。典型的作用域问题

Answer 3

改var为let，蛋是有个问题。。图片加载是非常非常快的。。特别是在本地时，你看到的结果还是会是一瞬间输出了3条。。你要一条一条看只能这样了：

for(let i=0;i<src.length;i++){
  var img=new Image();
  img.src=src[i];
  img.onload=function(){
    setTimeout(function(){
    console.log(img);
    },i*1000);
  };
}

Answer 4

var src=[
  "http://www.w3school.com.cn/i/site_photoref.jpg",
  "http://www.w3school.com.cn/i/site_photoexa.jpg",
  "http://www.w3school.com.cn/i/site_photoqe.jpg"
]
for(var i=0;i<3;i++){
  var img=new Image();
  img.src=src[i];
  img.onload=function(img){
    console.log(img.currentTarget)
  }
}

Answer 5

你这是因为全局变量泄露的原因。

最简单的就是用es6的把var改成let。
或者

for(var i=0;i<3;i++){
  (function(i){
  var img=new Image();
  img.src=src[i];
  img.onload=function(){
    console.log(img)
  }})(i);
}

Answer 6

事实上js中的事件执行是延时的，也可以理解成异步的（可能有点难以置信),但for循环的是立即执行的

这应该算是执行顺序和执行栈的问题，当执行onload事件时，主线程中的for循环已经执行完了。其实不光是onload事件，任何DOM事件都会是这种情况