javascript中回调和递归并用的问题

Question

var imge = new Image();
var arr = new Array(8);
var opp = 0;

function digui(opp){
    imge.src="这里在网上必须有一个图片的链接地址不然测试不出来";

    imge.onload = function(){
        opp++;
        if(opp < arr.length){
            console.log("第一层"+opp);
            digui(opp); 

        }   

        console.log(opp);

        }


}

digui(opp);

我想知道输出为什么是0到7，按递归应该是7到0啊，有人说是回调的作用，有人解释下吗，不胜感激

Answer 1

var opp=0;
function digui(opp){
    opp++;
    if(opp < 8){
        digui(opp); 
    }   
    console.log(opp);
}
digui(opp);
//输出的确实是8.7.6.5.4.3.2.1

Answer 2

简单而言，就是你把实现递归的模式给改了，传统的实现是这样的

> 1开始
> ---2开始
> ------3开始
> ------3结束
> ---2结束 
> 1结束

而的你实现改成了

    > 1开始
    > 1结束
    > ---2开始
    > ---2结束 
    > ------3开始
    > ------3结束

为什么会成这个样，是因为onload这个事件的触发，onload事件触发是在加载图片完成后才执行的。
也就是“1开始”后执行时并不会马上触发“2开始”的相关逻辑，而是要等待图片加载完成后，才会触发“2开始”，而这时在等待图片加载时，“1结束”部分已经执行完毕

function digui(opp){
    // 开始
    console.log(opp+'start');
    imge.src="这里在网上必须有一个图片的链接地址不然测试不出来";

    imge.onload = function(){
        opp++;
        if(opp < arr.length){
            console.log("第一层"+opp);
            digui(opp); 

        }   

        console.log(opp);

        }
    // 结束
    console.log(opp+'end');
}
digui(opp);

而基于楼上@jsven的回答

var opp=0;
function digui(opp){
    console.log(opp+'start');
    opp++;    
    if(opp < 8){
        digui(opp); 
    }   
    console.log(opp);
    console.log(opp+'end');
}
digui(opp);

从这2个执行结果中，可以看出，同步执行时确实是传统递归执行，而在异步时，根本就不是传统递归执行。

Answer 3

不是不想回答，也不是不会，看你代码乱七八糟的，问题描述也不清晰，一看心情都掉了一大半。

Answer 4

输出应该是1-7吧，最后还有个8

因为这是加载完图片后再去执行的，第一次图片加载完毕后进入回调函数，然后opp自增为1，进入if语句，打印出来“第一层1”，然后递归调用，这里会进行第二次图片加载，但是这是个onload监听事件啊，第二次图片加载期间，console.log(opp)执行，得到第二次图片加载完毕才引发第二次回调