javascript JS:等待期间显示多条消息

6g8kf2rb  于 2023-02-21  发布在  Java
关注(0)|答案(1)|浏览(120)

我有一个序列3等待调用一个函数:

const call1 = await doit('register/call1','otp=' + otp, 'post')
             .then(() => {
                    move();
             });

const call2 = await doit('register/call2','otp=' + otp, 'post')
             .then(() => {
                    move();
             });

const call3 = await doit('register/call3','otp=' + otp, 'post')
             .then(() => {
                    move();
             });

doit()函数是一个 AJAX 调用。
move()函数显示一个进度条:

//Progress Bar
    var width = 0;
    function move() {
        width += 100/3;
        var elem = document.getElementById("myBar");
        if (width <= 101) {
            elem.style.width = width + "%";
        }
    }

在此进度条下,我希望显示几条消息,如:“耐心点,工作正在进行中......”“再等一分钟......”“请稍等,马上就结束了......”等等
事实上,我想在等待呼叫期间显示消息。
我试着在等待之后加上这句话:

$('#progress_bar_message').html('Creation 1/3...');
            setTimeout(() => {
                $('#progress_bar_message').html("Creation 1/3... Be patient, the work is in progress...");
            }, 4000);
            setTimeout(() => {
                $('#progress_bar_message').html("Creation 1/3... Wait again a minute...");
            }, 8000);

但是它并不好用,也许在 AJAX 调用(jquery)中?

ql3eal8s

ql3eal8s1#

1.需要在移动功能中控制进度的完成百分比。

在setTimeout回调中,我们不知道某个 AJAX 完成的确切时间。

2.创建一个tip标志来控制progress_bar_message是否出现。当需要在setTimeout回调中更改progress_bar_message时,请选中该标志。当所有Ajax解析后,设置一个完整的tip。

完整实施:https://codesandbox.io/s/xenodochial-sanderson-2ieyf6?file=/index.html

相关问题