在Ajax中附加DIV之间的延迟/等待

Question

I have below code where I am trying to display a message (in the form of DIV) by delaying certain amount of time in between appending div tags, I have only very little knowledge on Ajax, and tried to find a solution but I am not able to get it to work.

The below code when I try to execute it's not waiting for 2 seconds, and continuously appends div messages without any delay.

Can someone guide me please?

Here is my code

<script>
       function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function wait_for_some_time() {
            await sleep(2000);
        }

    $(function () {
        $("#btn-chat").click(function (event) {
            event.preventDefault();
            if ($("#mes_resp").val() != "") {
                $("#form-chat").submit();
            }

        });
        $("#form-chat").submit(function (event) {
            event.preventDefault();
            var user_input = $("#mes_resp").val();
            var pre_key = $("#pre_key").val();
            if (user_input != "") {
                $(".media-list").append('<div class="bubble-line"><div class="bubble bubble--alt">' + user_input + '</div></div> <div></div>');

                if ((user_input == "yes" && pre_key == "duration")) {
                    i = 0;

                    while (i < 10) {

                    $(".media-list").append('<br>');
                    $(".media-list").append('<div class="thought"><div class="bubble">' + "Your request is in progress" + '</div></div> <div></div>');
                    $(".panel-body").stop().animate({ scrollTop: $(".panel-body")[0].scrollHeight }, 1000);
                    $("#mes_resp").val('');
                    wait_for_some_time();
                    i++;
                    }
                }

            }
            $("#mes_resp").val('')

        });

    });</script>

Answer 1

尝试将await关键字放在对wait_for_some_time（）函数的调用旁边。

Answer 2

I replaced with setInterval() and it worked great, In case if anyone is looking for

<script>
         function continueExecution() {
                    $(".media-list").append('<br>');
                    $(".media-list").append('<div class="thought"><div class="bubble">' + "Your request is in progress" + '</div></div> <div></div>');
                    $(".panel-body").stop().animate({ scrollTop: $(".panel-body")[0].scrollHeight }, 1000);
                    $("#mes_resp").val('');
        }

    $(function () {
        $("#btn-chat").click(function (event) {
            event.preventDefault();
            if ($("#mes_resp").val() != "") {
                $("#form-chat").submit();
            }

        });
        $("#form-chat").submit(function (event) {
            event.preventDefault();
            var user_input = $("#mes_resp").val();
            var pre_key = $("#pre_key").val();
            if (user_input != "") {
                $(".media-list").append('<div class="bubble-line"><div class="bubble bubble--alt">' + user_input + '</div></div> <div></div>');

                if ((user_input == "yes" && pre_key == "duration")) {
                    var timer;
                    timer = setInterval(function () {
                    i = 0;
                    while (i < 10) {
                        continueExecution();
                        i++;
                        }
                        clearInterval(timer);
                    }, 3000);
                }

            }
            $("#mes_resp").val('')

        });

    });</script>