for循环 image.onload怎么处理

通过循环创建图片，并在每个图片加载完成之后执行函数，不过每次都是触发最后一个图片的 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.οnlοad=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">

原因是： 全局变量泄露的原因，最简单的就是用es6的把var改成let。

或者

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

总结：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.οnlοad=function(){
        console.log(img.src);
        nextSrc(srcArr, sig + 1);
    }
    img.src=src[sig];
}
nextSrc(src, 0);