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

745984265
  • 187
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啊,有人说是回调的作用,有人解释下吗,不胜感激

回复
阅读 3.8k
4 个回答
✓ 已被采纳
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
lazyboy
  • 1.5k

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

> 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个执行结果中,可以看出,同步执行时确实是传统递归执行,而在异步时,根本就不是传统递归执行。

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

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

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

宣传栏