Javascript如何管理递归调用？

Question

我一直在玩JavaScript,并注意到一种奇怪的行为(至少对我来说很奇怪......)

所以我在这里做了一个SSCCE:

我有一个名为"myDiv"的div

function changeText(text){
    document.getElementById("myDiv").innerHTML=text;
}

function recursiveCall(counter){
    if(counter){
        setTimeout(function(){
            recursiveCall(--counter);
            changeText(counter);
        },750);
    }
}

recursiveCall(10);

实例:http://jsfiddle.net/T645X/

所以我正在更改div上的文本,发生的是文本从9变为0,而我认为从0到9,因为递归changeText(counter);调用是在调用实际更改的方法之前文本.

Answer 1

该函数包含异步的超时.

setTimeout(function(){
    recursiveCall(--counter);// calls the next function, which will call the next 
                             // and print in a timeout
    changeText(counter);  // print
},750);

在递归调用到达超时之前更改文本.

如果您愿意,可以从超时外部移动打印调用,这将导致预期的行为:

function recursiveCall(counter){
    if(counter){
        recursiveCall(--counter);            
        setTimeout(function(){
            changeText(counter);
        },750);
    }
}

(虽然,请注意,这里的打印时间不同,我们在某种程度上依赖于未定义的行为,假设它首先打印只是因为我们把计时器放在第一位)

如果您希望它仍然延迟打印,您可以告诉它已完成的功能.递归仍将在最初完成,但每个级别将告诉它上面的级别它已完成:

function recursiveCall(counter,done){
    if(counter){
        // note how recursion is done before the timeouts
        recursiveCall(counter-1,function(){ //note the function
            setTimeout(function(){          //When I'm done, change the text and let the 
                changeText(counter-1);      //next one know it's its turn.
                done(); // notify the next in line.
            },750);
        });
    }else{
        done(); //If I'm the end condition, start working.
    }
}

这是实现这一点的小提琴.