高手来看看这个是不是作用域的问题啊

Question

第一种情况：最后arr是我想要的结果，包含所有obj[key];function foo(obj){
    var arr = [];
    for(key in obj){
var img = new Image();
img.src = obj[key];
arr.push(img);
    }

    console.log(arr);
}第二种情况，为什么最后arr是空的？怎样才可以达到和第一种情况一样的效果？function foo(obj){
    var arr = [];
    for(key in obj){
   var img = new Image();
   img.src = obj[key];
   addEvent(img, 'load', function(){//图片加载完后才添加进去
              arr.push(this);
       })
    }

    console.log(arr);
}

Answer 1

function foo(obj){
    var arr = [];
    for(key in obj){
       var img = new Image();
       img.src = obj[key];            
       addEvent(img, 'load', function(){//图片加载完后才添加进去
              arr.push(this);
       })
    }
        
    console.log(arr);
}这个增加load事件，可以看做是一个异步的，你要这么做的话，只有把arr设置成全局的，然后等待每一个图片load完以后才能使用arr，同步的肯定做不到

Answer 2

时间顺序的问题，第一种是arr.push(img)执行以后才执行console.log(arr)
第二种是绑定事件（没有执行）以后执行console.log(arr)
因此第二种里面arr是空的。要达到第一种方法的效果，把console.log(arr)加到事件的函数里面，然后加上判断就行
function foo(obj){
  var arr = [];
  for(key in obj){
    var img = new Image();
    img.src = obj[key];   
    addEvent(img, 'load', function(){//图片加载完后才添加进去
      arr.push(this);
      if(arr.length==obj.length){
        console.log(arr);
      }
    })
  }
}

Answer 3

那如何在其作用域外面用到包含所有obj[key]的arr数组了，我第二种情况需求是，等待图片加载完毕后，在其他地方可以用得到？第一种情况，只要我return arr 并foo(obj)，就可以了，但第二种情况，如何return arr呢？

Answer 4

第二种情况，addEvent里面的闭包不是可以维持其父作用域的某些局部变量的么？怎么就不行了？

Answer 5

楼主是用的firefox吗？用firefox试试

Answer 6

和作用域无关，你没理解到代码执行顺序而已，return时arr.push(this);还未执行
自己在return前和push前都加一alert（当然要弹出不同内容一遍区分哪儿先执行）就明白了这种没法return，请使用回调机制function foo(obj,afterload){
  var arr = [];
  for(key in obj){
    var img = new Image();
    img.src = obj[key];   
    addEvent(img, 'load', function(){//图片加载完后才添加进去
      arr.push(this);
      if(arr.length==obj.length){
        console.log(arr);
        if(afterload) afterload(img);
      }
    })
  }
}
这样就可以传递一个函数获取到img对象了

Answer 7

异步是什么意思？去研究下
function foo(obj){
    var arr = [];
    for(key in obj){
       var img = new Image();
       img.src = obj[key];            
       addEvent(img, 'load', function(){//图片加载完后才添加进去
              arr.push(this);
              console.log(‘onload’，arr);
       })
    }
        
    console.log(arr);
}

Answer 8

原来这就是传说的callback啊，开始有点明白了，我再去测试下，谢谢各位热心解答，

Answer 9

记得执行顺序,第二个里面图片还没有加载完你的arr里面肯定没有东西了.记得结贴,