在第一个javascript完成后启动第二个javascript

我正在制作进度条。它有一个标签。我想在某个脚本完成后调整标签。在找到一些可能解的答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个没有。怎么了？代码如下：

HTML:
<form method ="post">
    <input class=generate type="submit" value="Upload" onclick="move();finalize()"/>
</form>

Javascript:
<script>
function move() {
    var elem = document.getElementById("myBar");   
    var myFunc01 = function() {
    var i = 1;
    while (i < 101) {
        (function(i) {
            setTimeout(function() {
                i++; 
                elem.style.width = i + '%';
                elem.innerHTML = i + '%';
            }, 600 * i)
        })(i++)
    }
    };
    myFunc01();
}
</script>
<script>
function finalize() {
    var elem = document.getElementById("myBar"); 
    var myFunc02 = function() {
                elem.innerHTML = 'Finalizing...';
    };
    setTimeout(myFunc02, 600);
}
</script>

HTML：
Javascript:
函数move（）{
var elem=document.getElementById（“myBar”）；
var myFunc01=函数（）{
var i=1；
而（i<101）{
（职能（一）{
setTimeout（函数（）{
i++；
elem.style.width=i+'%'；
elem.innerHTML=i+'%'；
}，600*i）
})（i++）
}
};
myFunc01（）；
}
函数finalize（）{
var elem=document.getElementById（“myBar”）；
var myFunc02=函数（）{
elem.innerHTML='Finalizing…'；
};
设置超时（myfunc02600）；
}

var elem=document.querySelector（'#myBar'）；
函数完成（）{
elem.innerText='上载已完成'；
}
var upload=函数（回调）{
var宽度=1；
变量id；
var frame=函数（）{
如果（宽度>=100）{
清除间隔（id）；
回调（）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
}
};
id=设置间隔（帧，10）；
};
/*
上传（函数（）{
elem.innerText='上载已完成'；
});
*/

#我的进度{
宽度：100%；
背景颜色：灰色；
}
#我的酒吧{
宽度：1%；
高度：30px；
背景颜色：绿色；
文本对齐：居中；
线高：27px；
}

开始上传

var elem=document.querySelector（'#myBar'）；
函数完成（）{
elem.innerText='上载已完成'；
}
var upload=函数（回调）{
var宽度=1；
变量id；
var frame=函数（）{
如果（宽度>=100）{
清除间隔（id）；
回调（）；
}否则{
宽度++；
elem.style.width=宽度+'%'；
}
};
id=设置间隔（帧，10）；
};
/*
上传（函数（）{
elem.innerText='上载已完成'；
});
*/

#我的进度{
宽度：100%；
背景颜色：灰色；
}
#我的酒吧{
宽度：1%；
高度：30px；
背景颜色：绿色；
文本对齐：居中；
线高：27px；
}

开始上传
谢谢詹姆斯，就这样！
经过一些重新安排，这就是第二个脚本的样子。它的工作原理与预期一致

<script>
function finalize() {setTimeout(function(){
var elem = document.getElementById("myBar"); 
var myFunc02 = function() {
            elem.innerHTML = 'Finalizing...';
};
myFunc02();
}
, 600);}
</script>


函数finalize（）{setTimeout（函数（））{
var elem=document.getElementById（“myBar”）；
var myFunc02=函数（）{
elem.innerHTML='Finalizing…'；
};
myFunc02（）；
}
, 600);}
谢谢詹姆斯，就这样！
经过一些重新安排，这就是第二个脚本的样子。它的工作原理与预期一致

<script>
function finalize() {setTimeout(function(){
var elem = document.getElementById("myBar"); 
var myFunc02 = function() {
            elem.innerHTML = 'Finalizing...';
};
myFunc02();
}
, 600);}
</script>


函数finalize（）{setTimeout（函数（））{
var elem=document.getElementById（“myBar”）；
var myFunc02=函数（）{
elem.innerHTML='Finalizing…'；
};
myFunc02（）；
}
, 600);}
您可以使用回调。回调是在完成时运行的函数

function move(callback) {
    //code you want to happen first
}
move(function(){
    //code you want to have happen after completion
})

这就是简单回调如何工作的基本思想
您可以使用回调。回调是在完成时运行的函数

function move(callback) {
    //code you want to happen first
}
move(function(){
    //code you want to have happen after completion
})

这是简单回调如何工作的基本思想
脚本的加载顺序与函数执行的逻辑顺序无关。单击按钮时，所有内容都已加载。您应该在匿名setTimeout函数的最后一次执行中调用finalize。脚本的加载顺序与函数执行的逻辑顺序无关。单击按钮时，所有内容都已加载。您应该在匿名setTimeout函数的最后一次执行中调用finalize。