关于javascript中的异步回调函数

发表于 更新于 Disqus：

在参加一个48小时的创客活动时，做了一个应用，用到了html5中的canvas，其中有一个步骤是读取9张图片画在canvas上，我遇到的难题就是onload函数的异步回调问题。最初的部分代码如下：

1
2
3
4
5
6
7
8
9
10
11
function fillJPG(ctx, el , width , height , i){
  var img;
  for(var i=0;i<MAX;i++){
    img = new Image();
    img.onload = function(){
      ctx.drawImage(img,width*i,0,width,height);
      /* console.log(i); */
    }
    img.src = el[i];
  }
}

这个代码中ctx是画布，el是图片url的数组，width和height分别是单张图片的宽和高，同时也可以用于计算坐标和图片大小压缩。
问题出现就是本来应该横向并排出现的9张图片一张都没有出现。把MAX调整为1后，发现，图片显示出来了，就一张，但是位置却出现在了第二张图片应该出现的问题，经过一晚上的调试，发现问题出现在回调函数。回调函数的执行时间是发生在图片载入结束，而循环体的执行是一直的，也就是i是一直在累加的，可以发现的就是i的累加速度快于图片载入的速度，所以，第一张图片载入完成的时候，i已经是1了（在MAX为1的情况下，其实也就是i为MAX了），也就是说图片是出现在了第MAX+1的位置上面了。

尝试过了一些方法，都避免不了这个异步，最终使用递归的方法来实现了这个功能，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
function fillJPG(ctx, el , width , height , i){
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,width*i,0,width,height);
    i++;
    if(i<MAX){
      fillJPG(ctx,el,width,height,i);
    } else {
      return;
    }
  }
  img.src = el[i];
}