javascript - Jquery，回调函数中的行不等待执行

Question

我想创建一个漂亮的动画，其中段落淡入淡出、更改内容、取消淡入淡出、再次更改等等。事情是我设置段落内容在淡入淡出之前执行的那一行。

function displayAnim(x){
    let textBox = document.getElementById("resultBoxText");
    fadeO(textBox,x,0);
}
function fadeO(elem,x,i){
    $("#resultBoxText").fadeIn("2000",next(elem,x,i));
}

function next(elem,x,i){
    elem.innerHTML = result[x][i]; //this line got executed well, but it executed 5 times already even before the first unfade happens
    let nextI = i+1;
    if(nextI >= 6){
        $("#resultBoxText").fadeOut("2000",show(x));
        return;
    }else{
        $("#resultBoxText").fadeOut("2000",fadeO(elem,x,nextI));
    }
}

function show(x){
    let textBox = document.getElementById("resultBoxText");
    textBox.innerHTML = result[x][6] //it reach this line already. this line is supossed to be executed after the fades occur 5 times
}

我究竟做错了什么？谢谢(^_^)

标签： javascriptjquery